CSS：backdrop-filter实现毛玻璃的效果

实现效果

实现代码

/* 关键属性 */
background-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

完整代码

<style>
  /* 遮罩层 */
   .mo-mask {
     position: fixed;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     height: 100%;
     background-color: #1e80ff;
   }

   .mo-dialog {
     border-radius: 16px;
     height: 400px;
     width: 600px;
     margin: 100px auto;
     /* 关键属性 */
     background-color: rgba(255, 255, 255, 0.4);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
   }
 </style>
 
 <div class="mo-mask">
   <div class="mo-dialog"></div>
 </div>

参考文章

• 前端笔记 - 【CSS】 - filter 于 backdrop-filter