CSS を使用して曇りガラス効果を実現する方法についての簡単な説明

この記事では、CSS を使用してすりガラス効果を実現する方法を説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#Apple の公式 Web サイトでフローティング メニューのすりガラス効果を見た

この効果に魅了されました惹かれたのでソース コードを詳しく調べたところ、この効果は 2 つの CSS プロパティだけで実現できることがわかりました。

Apple Web サイトのアドレス https://www.apple.com.cn/macos/big-sur/. 興味がある場合は、チェックしてみてください。さらに興味深い特殊効果がいくつかあります。 Apple のページ この体験は本当によくできているので、興味があれば勉強してみてください。

主要な CSS 属性

background: rgba(29,29,31,0.72);

透明度 0.72 の背景色を追加します

backdrop-filter: saturate(180%) blur(20px);

backdrop-filter 要素の後ろにフィルターを追加します, 要素の代わりに、2 つのフィルター

saturate と blur

## がここに追加されます。プログラミング関連の知識については、

プログラミング ビデオ#をご覧ください。 ＃＃！ ！

以上がCSS を使用して曇りガラス効果を実現する方法についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。