前言
最近在参加一个项目的时候，需要实现毛玻璃的效果，一开始想简单的使用背景透明度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>
这样，一个简单的毛玻璃效果就实现了。
