网站是如何实现变灰的

一觉醒来，各大网站的首页已变成黑白主题，在此对抗击新冠肺炎疫情斗争牺牲烈士和逝世同胞的深切哀悼。

作为一名前端开发，自然要抱着好奇的心去看效果是如何实现的，先是打开了汽车之家网站。

只用了一行代码 filter: grayscale(100%) 就实现这样的效果，原来这属性这么好用！

各大网站都是这样实现的样式的吗？带着这样的疑问在各大网站转了一圈，无一例外的都是用了filter这个属性。

只是在b站看到了这样的一点瑕疵，看来以后使用的时候还要注意下，原来的背景色，如果和滤镜的色值一样，就会变成白色。

天猫网上看起来有点不一样啊,多了两个属性，这个稍后解答

filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

文档解释

filter CSS属性应用于像模糊或色移的元素的图形效果。滤镜通常用于调整图像，背景和边框的渲染，定义了元素(通常是)的可视效果(例如：模糊与饱和度)。

属性 grayscale()

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。 filter: grayscale(100%)

属性 url()

URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素. filter: url(resources.svg#c1)， 通俗的一点解释，是使用svg上id为c1的filter滤镜。

至于DXImageTransform.Microsoft.BasicImage 是对IE的一种兼容写法，博客上写的比较详细，然而本人在IE上实际测试并没有实现预期效果。

注意：Internet Explorer 并不支持 filter 属性，更多属性配置，请阅读MDN文档