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;
}