您当前的位置:首页 > 计算机 > 编程开发 > Html+Div+Css(前端)

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

时间:05-21来源:作者:点击数:

实现效果

在这里插入图片描述

实现代码

/* 关键属性 */
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>
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门