模糊效果

最近在做大屏，不知道为什么这个ui非常喜欢使用毛玻璃效果==（也就是模糊），提起模糊效果，那就不巴拉巴拉我在使用过程中遇到的奇奇怪怪的问题了

说是模糊，其实在实现过程就是加个滤镜进行元素的渲染，模糊其实有两种实现

filter

这个属性可以将模糊或颜色偏移等图形效果应用于元素，包含几种函数：

blur(像素值)

使用：filter: blur(5px);

可以将图像进行高斯模糊，（但是整体都会被模糊，如果只想应用于背景并且还想使用这个属性的话，可以使用伪元素）

.demo-div{
    position: relative;
    &:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #fff;
        backdrop-filter: blur(14px);
        z-index: -1;
    }
}

brightness(百分比)

将线性乘法器应用于输入图像，以调整其亮度。为0则为全黑图像，大于100%会使图像更加明亮。

使用：filter:brightness(80%);

contrast(百分比)

调整输入图像的对比度。值是 0% 将使图像变灰；值是 100%，则无影响；若值超过 100% 将增强对比度。

使用：filter:contrast(80%);

......

更多有需要的可以去查看官网，这些函数也是可以进行组合使用的，如

filter: contrast(175%) brightness(103%);

backdrop-filter

这个属性就是我在使用的css属性了，可以为一个元素后面区域添加图形效果（如模糊或颜色偏移）。也就是背景模糊，但是该元素或者背景需要有一定的透明度来看到效果

这个属性的使用和filter非常相似，就不进行过多阐述了

问题

在使用这个属性的时候，出现了一个问题，毛玻璃效果失效，经过排查和额外写demo测试，才发现这个属性有对于所有位于元素后面的内容都会产生影响，这意味着它不仅仅作用于元素的直接背景，而是作用于元素后面的所有内容。也就是我遇到的情况

我在大屏的两侧指标整体有一个毛玻璃效果，但是指标分为多个子项，有个轮播的介绍也用到了毛玻璃效果，最外层的直接影响到了里面所有，并且甲方还非常严（e）谨（xin），外层的毛玻璃效果不能去除，内层的也必须有，查了方法说是子元素使用伪元素进行背景模糊（试了无效），考虑到内部不仅是这个轮播有模糊，我选择了将最外层的模糊效果使用::after+backdrop-filter()实现了效果

最后的碎碎念——————

如果你们的ui不是甲方来出，一定一定不要用毛玻璃效果！这个属性的失效不止是有父子元素样式影响，其他的一些css样式也有可能导致失效（如，透明度opacity，超出隐藏overflow等），并且图形效果可能会要求浏览器进行额外的计算，影响到性能。ui一个别处心裁的设计，开发榨干脑细胞qwq，最后，每日一骂（破项目）