在今年清明的那天,很多网站都变灰色了,其实现原理为在html元素加上了css3属性filter(滤镜)。

html {
filter: grayscale(1);
}

即可设置灰度为100%。

效果如下:

CSS3的filter属性解析_html

还可以通过修改

html {
filter: brightness(0.9);
}

调节页面亮度,实现夜间模式。

效果如下:

CSS3的filter属性解析_夜间模式_02

grayscale和brightness的值可以是0-100%。