公众号：程序员黑黑领资料、面试题、学AI、入交流群，欢迎关注哈。

2020年04月04日注定是个被载入史册的日子 - 向英雄致敬，向逝者致哀！

打开掘金，意外发现整个首页都变灰了，看了看淘宝、京东、百度，他们的首页也都变灰了。

淘宝

京东

掘金

当时第一反应就是这样的效果是怎么实现的呢？难道是设计小姐姐重新设计了图片、程序员小哥哥们有加班加点紧急重新写了一份页面吗？

出于职业反应，赶紧按了电脑的F12打开浏览器的控制台选中掘金的logo看了下，发现图片还是彩色的，并不是灰色的呀，但是页面呈现确实灰色的，好神奇！！！难道是用了什么黑魔法吗？！！

一下还真没想出来，就感觉真的好神奇，网络加载的图片颜色未变，但是呈现在用户眼前的颜色却变了，这是怎么实现的呢？

既然是整个首页都变了，那就从页面最顶层元素找找，看看能有什么发现不。

后来发现在html元素这多了一个mourning的类这个类是干啥的呢？单词不认识呀，百度查了下这个单词原来是哀悼的意思。是不是这个类的原因呢，尝试着在mourning这个类后加了个1变成mourning1，网站因为找不到这个类，所以这个类中的代码失效了，网站的颜色恢复如初了。

掘金首页变灰现在可以肯定就是这个类的原因了，于是又看了下淘宝、京东的html元素有什么修改，发现

淘宝中html元素加载了如下代码

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

京东的html元素加了一个.o2_gray的类

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

分析淘宝、京东、掘金发现他们有个相同的地方，就是都使用了css3filter滤镜这个属性，原来如此。至于filter属性的具体使用方法，大家可以看下MSD中对filter属性的描述，这里就不抄官方文档了。

如果仔细看淘宝、京东给html添加的代码会先这两个网站除了给filter设置grayscale属性外，还写了filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);这句代码，这句代码在上面MDN描述filter时并没找到，这句是干啥的呢？

看到Microsoft这个词后猜想应该是处理兼容的，从MDN文档中也可以看到IE并不支持filter属性 filter浏览器兼容

于是找了个台windows电脑用IE打开京东看了下，发现京东首页是彩色的

filter属性IE兼容疑惑 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);这段代码并没起作用，打开淘宝看了下也不行。用IE浏览器仿真各种模拟网站颜色依然是彩色的，因为身边没有其他windows电脑，目前这个疑问只能去公司找个电脑一探究竟了，不知是否有大佬能帮小弟解疑答惑🙂

感谢阅读

如果本文对您有帮助，欢迎点赞\评论\收藏哈，您的「点赞\评论\收藏」是我创作的加油站，感恩🤗。
公众号：程序员黑黑领资料、面试题、学AI、入交流群，欢迎关注哈。

向英雄致敬，向逝者致哀 - 网站灰色首页是如何实现的呢？

感谢阅读