css 实现毛玻璃效果

前言

最近在参加一个项目的时候，需要实现毛玻璃的效果，一开始想简单的使用背景透明度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进行绝对定位

 

      

      

          

              

                  登陆/注册
              
          
      
  

这样，一个简单的毛玻璃效果就实现了。