除了过滤，还有什么方法可以让网站变灰吗？
大家都知道，当一些大事发生的时候，我们的网站可能需要清灰，像这样：当然，一般来说，重置整个站点是很简单的，大部分前端同学都知道，只需要用一行CSS实现全站变灰的方式。像这样，我们只需要在HTML中添加一个统一的过滤器：html{filter:grayscale(.95);-webkit-filter:grayscale(.95);}或者，使用SVG滤镜，也可以快速实现网站变灰：
//...
html{filter:url(#grayscale);}large有时候，这可以解决大部分问题。但是，也有一些例外。例如，如果我们只需要将网站首屏置灰，当用户开始滚动页面时，非首屏部分不需要置灰，如下动图所示，应该怎么做我们的确是？看一下提示：如何实现这种只让首屏变灰的诉求？使用backdrop-filter实现滤镜蒙版这里，我们可以使用backdrop-filter来实现蒙版滤镜效果。filterVSbackdrop-filter在CSS中，有两个与过滤器相关的属性——filter和backdrop-filter。backdrop-filter是较新的规范引入的新属性，您可以点击查看滤镜效果模块Level2。filter：该属性将模糊或颜色偏移等图形效果应用于元素。backdrop-filter：此属性允许您向元素后面的区域添加图形效果（例如模糊或颜色偏移）。它适用于元素后面的所有元素，为了看到效果，元素或其背景必须至少部分透明。注意两者的区别，filter作用于元素本身，而backdrop-filter作用于元素后面区域覆盖的所有元素。它们支持的过滤器类型完全相同。backdrop-filter最常见的使用方法是用它来实现毛玻璃效果。看这段代码：Normal
filter backdrop-filter .bg{background:url(image.png);&>div{宽度：300px;高度：200px；背景：rgba（255、255、255、.7）；}.g-filter{滤镜：模糊（6px）；}.g-backdrop-filter{背景滤镜：模糊（6px）；}}CodePenDemo--filter和backdrop-filter比较filter和backdrop-filter在用法上最明显的区别是：filter作用于当前元素，它的后代元素也会继承这个属性。backdrop-filter作用于该元素后面的所有元素，仔细区分理解，一个是当前元素及其后代元素，一个是该元素后面的所有元素。明白了这一点，你就明白为什么会有filter和backdrop-filter了。使用backdrop-filter实现首屏灰度遮罩这样我们就可以快速的使用backdrop-filter实现首屏灰度遮罩效果：html{position:relative;宽度：100%；高度：100%；溢出：滚动；}html::before{内容：“”；位置：绝对；插图：0；背景滤镜：灰度（95%）；z-index:10;}就这样，我们在整个页面上叠加了一层filtermask，只在首屏页面实现了变灰：使用pointer-events:none来保证页面交互当然这里有个很严重的问题，我们的页面有很多交互效果，如果在上面叠加了一层遮罩效果的话，那么这层遮罩下的所有交互事件都会失效，比如hover，click等。那么怎么解决呢？这也好办。我们可以在这一层mask里面加上pointer-events:none，这样这层mask就不会屏蔽事件的点击交互。代码如下：html::before{content:"";位置：绝对；插图：0；背景滤镜：灰度（95%）；z-指数：10；+pointer-events:none;}CodePenDemo--GrayWebsitebybackdrop-filter当然有的同学又会开始质疑了，虽然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。翻译是混合模式。如果您对混合模式还比较陌生，可以看看我的这些文章：不可思议的颜色混合模式mix-blend-mode不可思议的混合模式background-blend-modeCSStricksandtricks|妙用混合模式实现文字空心波浪效果使用混合模式让文字智能适配背景色这里，替代backdrop-filter的方法是使用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总结到这里，再简单总结一下。如果需要全站灰化，使用cssfilter:grayscale()对于一些低版本的浏览器，使用SVGfilter通过filter导入对于只需要将首屏灰化的，可以使用backdrop-filter:grayscale()配合pointer-events:none对于需要更好兼容性的，使用混合模式mix-blend-mode:hue,mix-blend-mode:saturation,mix-blend-mode:color也是很好的方式。有一个小技巧，在CSS的世界里，处理颜色的时候，应该会想到filter，backdrop-filter和mix-blend-mode。最后，本文到此结束。希望这篇文章对你有所帮助：）更多精彩的CSS技术文章汇总在我的Github——iCSS，持续更新中。欢迎点个星订阅收藏。有什么问题或者建议可以多交流。原创文章文笔有限，知识匮乏。如果文章中有任何不准确的地方，请告诉我。
