有些特殊的日子需要将网页置灰，比如向致敬某人、纪念某些重要的日期等。
方法1
html.gray {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
方法2
- 使用 backdrop-filter 实现首屏置灰遮罩
html {
position: relative;
}
html::before {
content: "";
position: absolute;
inset: 0;
/* 保证页面交互 */
pointer-events: none;
z-index: 999;
backdrop-filter: grayscale(95%);
}
方法3
- 借助混合模式实现网站置灰
html {
background: #fff;
position: relative;
}
html::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 9999;
mix-blend-mode: color;
background: rgba(0, 0, 0, 1);
}
