4月4日，网页变灰效果原理

大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。其实，解决方案很简单，只需要几行代码就能搞定了。

filter: grayscale(100%);

就是这一行代码，我们把这一行代码放到给到网站根节点，也就是html标签，就可以实现整个网站变灰的效果，不同的网站为了考虑兼容性，有不同的写法，比如腾讯视频的

html {
filter: gray;
-webkit-filter: grayscale(100%);
filter: grayscale(100%); }

比如B站的、淘宝、腾讯网

html.gray {
-webkit-filter: grayscale(.95)
; }