记录一下最近很火的用一行代码实现网页变灰

2020 年 4 月 4 日，星期六，清明节。基本上你看到的主流网站都变灰白了(虽然我的也是...)，大家可以看到全站的内容都变成灰色了，包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢？

有人会以为所有的内容都统一换了一个 CSS 样式，图片也全换成灰色的了，按钮等样式也统一换成了灰色样式。

但你想想这个成本也太高了，而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实，解决方案很简单，只需要几行代码就能搞定了。

直接css:

html {
-webkit-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(graysale=1);
}

也是用的这个 CSS 样式，其内容为：

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

这个实现看起来兼容性会更好一些,所以通过一个全局的 CSS 样式就能将整个网站变成灰色效果。

从上面css样式代码中看到有个样式名叫做 filter，于是搜下 MDN 的官方介绍。

其链接为：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter 大家不妨可以进去学习一下。