用CSS实现高斯模糊背景效果

高斯模糊是一种常见的效果（俗称毛玻璃效果），在CSS中使用filter、backdrop-filter属性均可实现。

这里主要介绍简单的方式：backdrop-filter: blur();

 

简介：

backdrop-filter 是使透过该层的底部元素模糊化

backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。

因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

backdrop-filter目前兼容性不佳，尤其是安卓移动端

blur()使得出现毛玻璃效果，只会模糊背景

 1 .showStyle::before{
 2     content: "";
 3     position: absolute;
 4     top: 0;
 5     right: 0;
 6     bottom: 0;
 7     left: 0;
 8     background-color: rgba(31, 33, 41, 0.4);
 9     z-index: -1;
10     -webkit-backdrop-filter: blur(80px);
11     backdrop-filter: blur(80px);
12 }
13 .showStyle {
14     width: 200px;
15     height: 100px;
16     position: relative;
17 }

详细属性请查看：https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter（一定瞄几眼）

posted @ 2021-12-28 14:41  zigood  阅读(2715)  评论(0)  编辑  收藏  举报