各大网站是如何使用 CSS 使页面变灰的
grayscale()
html {
filter: grayscale(100%); // 暂不考虑浏览器兼容的情况
}
e.g.: baidu.com, mi.com, smartisan.com, jd.com, taobao.com, qq.com, sina.com.cn, sohu.com, 163.com, toutiao.com, ifeng.com, bilibili.com.
值得一提的是,qq 和 sina 这两者不知道谁抄袭谁,都把样式名称拼写错误,应为 grayBody
实为 garyBody
。
如有雷同,纯属抄袭巧合。附图如下:
saturate()
html {
filter: saturate(0);
}
e.g.: 360.cn.
grayscale()
v.s. saturate()
"css - What's the difference between CSS3 filter grayscale and saturate? - Stack Overflow".
使用 JavaScript 动态设置
一行 JavaScript 代码让页面置灰。
('4/4/2020' == (new Date()).toLocaleDateString('en-US')) && (document.body.style.filter = 'grayscale(100)');
// ('2020/4/4' == (new Date()).toLocaleDateString('zn-CN')) && (document.body.style.filter = 'grayscale(100)');
Other
页面本身色彩不丰富,简单一张背景图以示敬意。
e.g.: cn.bing.com.