淺談css實現毛玻璃效果的方法

這篇文章帶大家了解一下使用css如何達到毛玻璃效果？有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

在蘋果的官網上看到看到一個懸浮選單的毛玻璃效果

被這種效果給吸引到了，深入原始碼後發現只透過兩個css屬性就能達到效果。

蘋果網址https://www.apple.com.cn/macos/big-sur/，有興趣可以上去看下，上面還有一些更有意思的特效，不得不說蘋果的頁面體驗是真的做得好，有興趣可以研究下。

關鍵css屬性

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

加上一個透明度為0.72的背景顏色

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

backdrop-filter給元素後方加過濾器，而不是元素，這裡加了兩個濾鏡saturate和blur

更多程式相關知識，請造訪：程式設計影片！ ！

以上是淺談css實現毛玻璃效果的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！