.bg{background:url(image.png);&>div{宽度：300px;高度：200px；背景：rgba（255、255、255、.7）；}.g-filter{滤镜：模糊（6px）；}.g-backdrop-filter{背景滤镜：模糊（6px）；}}CodePenDemo——过滤器和背景过滤器比较[2]。filter和backdrop-filter最明显的区别是filter作用于当前元素，它的后代元素也会继承这个属性。backdrop-filter作用于元素后面的所有元素。仔细区分理解，一个是当前元素及其后代元素，一个是该元素后面的所有元素。明白了这个，你就能明白为什么会有滤镜，就会有backdrop-filter。使用backdrop-filter实现首屏灰度遮罩这样我们就可以快速的使用backdrop-filter实现首屏灰度遮罩效果：html{position:relative;宽度：100%；高度：100%；溢出：滚动；}html::before{内容：“”；位置：绝对；插图：0；背景滤镜：灰度（95%）；z-index:10;}就这样，我们在整个页面上叠加了一层filtermask，只在首屏页面实现了变灰：使用pointer-events:none来保证页面交互当然这里有个很严重的问题，我们的页面有很多交互效果，如果在上面叠加了一层遮罩效果，那么在这层遮罩下的所有交互时间都会失效，比如悬停，点击等等。那么怎么解决呢？这个也好办，我们可以在这层mask里面加上pointer-events:none，这样这层mask就不会挡住事件的点击交互了。代码如下：html::before{content:"";位置：绝对；插图：0；背景滤镜：灰度（95%）；z-指数：10；+pointer-events:none;}CodePenDemo--GrayWebsitebybackdrop-filter[3].当然，有的同学又要开始质疑了，backdrop-filter虽然好，但是兼容性还是要看的，很多老版本的firefox不支持，大哥。这么多Firefox用户怎么办？截至2022/12/01，Firefox最新版本为109，但在Firefox103之前，不支持backdrop-filter。别着急，除了filter和backdrop-filter，我们还有办法实现网站变灰。使用混合模式实现网站变灰除了filter和backdrop-filter，CSS中另一个可以干预和操纵颜色的属性是mix-blend-mode和background-blend-mode，翻译过来就是混合模式。如果你对混合模式还比较陌生，可以看看我的这些文章[4]：不可思议的颜色混合模式mix-blend-mode[5]。难以置信的混合模式background-blend-mode[6]。CSS技巧和窍门|使用混合模式实现文字镂空波浪效果[7]。使用混合模式智能地使文本适应背景颜色[8]。在这里，背景过滤器的替代方法是使用mix-blend-mode。看代码：html{position:relative;宽度：100%；高度：100%；溢出：滚动；背景：#fff；}html::before{内容：“”；位置：绝对；插图：0；背景：rgba(0,0,0,1);混合混合模式：颜色；指针事件：无；z-index:10;}我们还是在整个页面的首屏多叠加了一层元素，并把它的背景颜色设置为黑色背景：rgba(0,0,0,1)。通常，我们的网站应该是黑色的。不过神奇的是，网站元素的灰化也可以通过混合模式的叠加来实现。我们来看看效果：实测后：{mix-blend-mode:hue;//色调混合混合模式：饱和度；//饱和度混合混合模式：颜色；//color}以上三种混合方式，叠加黑色背景，都可以实现内容的变灰。值得注意的是，在上面的方法中，我们需要为HTML设置一个白色的背景色，同时不要忘记在遮罩层中添加一个pointer-events:none。CodePenDemo--GrayWebsiteByMixBlendMode[9]总结到这里，再简单总结一下。如果需要对整个站点进行灰度化，请使用CSS过滤器：grayscale()。对于一些低版本浏览器，使用SVG滤镜通过filter导入。对于那些只需要将第一个屏幕变灰的用户，您可以使用backdrop-filter:grayscale()withpointer-events:none。对于需要更好兼容性的，使用mix-blend-mode:hue,mix-blend-mode:saturation,mix-blend-mode:color也是一个很好的方式。有一个小技巧，在CSS的世界里，只要你处理颜色，你就应该想到filter、backdrop-filter和mix-blend-mode。最后，本文到此结束，希望本文对您有所帮助：）参考文献[1]backdrop-filter：https://drafts.fxtf.org/filter-effects-2/#BackdropFilterProperty。[2]CodePenDemo——filter和backdrop-filter对比：https://codepen.io/Chokcoco/pen/WNjebrr。[3]CodePenDemo--backdrop-filter的灰色网站：https://codepen.io/Chokcoco/pen/zYaJQJm。[4]几篇文章：https://github.com/chokcoco/iCSS/issues?q=is%3Aopen+label%3A%E6%B7%B7%E5%90%88%E6%A8%A1%E5%BC%8F.[5]不可思议的混色模式mix-blend-mode：https://github.com/chokcoco/iCSS/issues/16。[6]难以置信的混合模式background-blend-mode：https://github.com/chokcoco/iCSS/issues/31。[7]CSS技巧与窍门|使用混合模式实现文字镂空波浪效果：https://github.com/chokcoco/iCSS/issues/140。[8]使用混合模式让文本智能适应背景颜色：https://github.com/chokcoco/iCSS/issues/169。[9]CodePen演示——MixBlendMode的灰色网站：https://codepen.io/Chokcoco/pen/poKOmxp。[10]Github——iCSS：https://github.com/chokcoco/iCSS。