在网站都变成灰色，几行代码就搞定了一文中，介绍各大网站都使用了CSS filter，使用网站全部编程了灰色。整理出来一段规范的样式代码如下：

filter置灰代码

那么除了filter，还有什么方式可以将网站都变成灰色呢？直接上代码：

方式一：backdrop-filter

backdrop-filter

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

这段样式代码给body加了一层遮罩，并置于顶层，是所有页面元素都置于遮罩之下。然后使用backdrop-filter:grayscale()使遮罩下元素置灰色。

filter 和 backdrop-filter 使用上最明显的差异在于：

• filter：作用于当前元素，并且它的后代元素也会继承这个属性。
• backdrop-filter：作用于元素背后的所有元素。

filter 是作用于元素本身，而 backdrop-filter 是作用于元素背后的区域所覆盖的所有元素。而它们所支持的滤镜种类是一模一样的。

通过z-index理解元素背后的所有元素的含义。

这里有个很严重的问题，我们的页面是存在大量交互效果的，如果叠加了一层遮罩效果在其上，那这层遮罩下方的所有交互事件都将失效，譬如 hover、click 等。我们可以通过给这层遮罩添加上 pointer-events: none，让这层遮罩不阻挡事件的点击交互。

方式二：mix-blend-mode

mix-blend-mode

mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

这段样式同样设置了一层遮罩，并设置背景色background: rgba(0, 0, 0, 1)，通过mix-blend-mode: color设置遮罩与body颜色混合，达到置灰的效果。也可以通过这种方式进行颜色混合达到其他颜色的目的。对于颜色把握有较高的要求。

{
  mix-blend-mode: hue;            // 色相
  mix-blend-mode: saturation;     // 饱和度
  mix-blend-mode: color;          // 颜色
}

总结：

1. 如果你需要全站置灰，使用 CSS 的 filter: grayscale()
2. 对于仅仅需要首屏置灰的，可以使用 backdrop-filter: grayscale() 配合 pointer-events: none
3. 对于需要更好兼容性的，使用混合模式的 mix-blend-mode: hue、mix-blend-mode: saturation、mix-blend-mode: color 也都是非常好的方式

涉及CSS，但凡和颜色打交道，你都应该想起 filter、backdrop-filter 和 mix-blend-mode。