记录一下最近很火的用一行代码实现网页变灰 发布于 1 天前 – 15 次检阅

• 2020 年 4 月 9 日
• 笔记

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 大家不妨可以进去学习一下。