css3实现高斯模糊 filter(滤镜) 属性和backdrop-filter的区别

1.filter属性

 可以看出我们其实可以使用filter实现很多的效果。

2.backdrop-filter属性

backdrop-filter 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

3.filter和backdrop-filter具有一定区别：

• Filter不仅仅作用于当前元素，后代元素也会继承这个属性，作用于一个空背景元素则没有效果。
• backdrop-filter 是使透过该层的底部元素模糊化
• backdrop-filter属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素 背后 的所有元素，为了看到效果，必须使元素或其背景至少部分透明。
• backdrop-filter目前兼容性不佳，尤其是安卓移动端。

总结：

1.filter是作用在元素本身，其子元素也会继承这个属性，变模糊

例如：

 2.backdrop-filter 是使最底部元素（也就是只作用在该元素本身）模糊化

看下我们的需求：

现在我们看一下高斯模糊的代码实现：

// 蒙层的样式
.background-maskCell {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 101;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8rpx); // 数值越大越模糊
    overflow-x: hidden;
}