4月4日网站变灰色的效果是怎么实现的？

4月4日时，很多网站包括主页和内容（包括图片、按钮等）也都已经变成了灰色。当天我打开的csdn、人人视频都全部变为了灰色。

我当时第一想法是难道把这些图片都换了一遍吗？？？但是成本未免太高，且可能会有疏漏。今天在公众号里看到了一篇推文的详细解释，记录一下。

---

一、实际的解决方法：（仅对于网站）

加一个全局的CSS样式。加在最外层的html上。

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);
}

---

二、什么是Filter — 滤镜？

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

1. 通过 filter 样式改变了图片、颜色、模糊、对比度等等信息。
2. 灰色图像，这里其实就是设置了 grayscale，其用法如下：

filter: grayscale(percent)

将图像转换为灰度图像。值定义转换的比例。percent 值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘子。若未设置，值默认是 0。另外除了传递百分比，还可以传递浮点数，效果是一样的。

如：

filter: grayscale(1)
filter: grayscale(100%)

都可以将节点转化为 100% 的灰度模式。

所以一切到这里就清楚了，如果我们想要把全站变成灰色，再考虑到各浏览器兼容写法，可以考虑如下写法：

.gray {
-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);
}

这样想要变灰的节点只需要加上 gray 这个 class 就好了，比如加到 html 节点上就可以全站变灰了。

---

三、各浏览器对filter的兼容性

除了 IE，其他的 PC、手机端的浏览器都支持了，Firefox 的 PC、安卓端还单独对 SVG 图像加了支持。

---

四、APP中是怎么实现的？

摘自：公众号下方的留言

1. 有些资源是从Web接口获得的，比如banner，缩略图，小图标等。如微博。
2. 某些颜色或者样式配置也是从接口获得的，是可配置的。
3. 一些APP内嵌的Web页面，和网页原理是一样的。

---

参考文章：今天网站都变成灰色了，这其中是怎么实现的？