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

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

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

---

 

简介：

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

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

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

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

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

.showStyle::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(31, 33, 41, 0.4);
    z-index: -1;
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
}
.showStyle {
    width: 200px;
    height: 100px;
    position: relative;
}

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