网站灰黑（国难日哀悼）效果

在政府项目中需要实现一个国难日哀悼黑灰网站功能。

第一次接触这个需求，第一件事是百度一下找到最佳的解决方案，不要自己想浪费时间，方案不好再自己思考。

网上搜索到的解决方案是使用css滤镜功能。全局加入css如下:

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

大功告成。

可惜了，如果这么简单就解决就好了,滤镜功能在ie10 ie11上不生效。反而在ie9有特定的语法让其生效。 可是政府项目你懂得，当时要求必须兼容ie9。

网上兼容ie11，ie10的做法是js遍历网页上的全部节点,并且为节点设置字体灰黑色，图片灰黑化等。

最终解决方案:  页面加入css滤镜。 然后通过js判断浏览器为ie11,ie10,执行全节点置灰的函数。 我觉得这个不是一个非常好的解决方法，为了尽早交付也没有继续深究。 希望之后能找到更好的解决方案。