前言

最近在參加一個項目的時候，需要實現毛玻璃的效果，一開始想簡單的使用背景透明度rgba或者filter:blur,來實現。
遇到問題：
1.只使用透明度不能準確的實現毛玻璃的效果。
2.如果單獨的使用filter：blur（…px），發現子元素全部模糊。
解決方法：
主要通過，蒙層（定位來實現）。
主要代碼如下：

//需要添加毛玻璃效果的div.headSty{height:0.6rem;width: 100%;padding:0 .1rem;display: flex;align-items: center;justify-content: center;z-index: 10;// 主要內容區也要進行定位,并用z-index讓它位于毛玻璃之上，如果不進行定位，內容區也會模糊position: relative;} //實現毛玻璃的div .frosted{position: absolute;left: 0;top: 0;width: 100%;height: 60px;background: rgba(255,255,255,.1);backdrop-filter: blur(4px); }// 相對于body進行絕對定位 <div class="frosted"></div><div class="headSty"><div class="logoimg"></div><div class="left"><div class="otherNav"><div class="d3">登陸/注冊</div></div></div></div>

這樣，一個簡單的毛玻璃效果就實現了。

總結

以上是生活随笔為你收集整理的css 实现毛玻璃效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。