网页快速置灰效果

1、将页面 html 元素设置以下样式即可实现页面全部置灰：

html{
    filter: grayscale(100%);
}复制

2、考虑兼容问题可以直接把兼容性的属性写上去：

html{
	 -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}复制

• -webkit-：带有 webkit 前缀可以在 webkit 内核的浏览器中生效；
• -moz-：带有 moz 前缀可以在 Firefox 浏览器中生效；
• -ms-：带有 ms 前缀可以在 IE 浏览器生效；
• -o-：带有 o 前缀可以在 Opera 浏览器生效；
• 最后三行都是为了兼容 IE 内核的浏览器。

3、进行首屏部分置灰：
解决方案 ：用backdrop-filter做一个遮罩，毕竟filter还是有点损耗首屏性能的，虽然可以用transform开启硬件优化一些，我们还可以用遮罩的方式挡住也可以的，并且设置pointer-events: none；不阻挡用户交互，也是一段css搞定

html {
    position: relative;
    width: 100%;
    height: 100%;
}
html::before {
    content: "";
    position: fixed;
    backdrop-filter: grayscale(100%);
    pointer-events: none;
    inset: 0;
    z-index: 100;
}复制