为深切哀悼在抗击新冠肺炎疫情斗争中牺牲的烈士和逝世同胞，响应国务院发布的2020年4月4日全国性哀悼各大网站首页都设置为灰色，这里整理一下设置的方法。

使用css支持chrome、Opera、Firefox浏览器，对于IE10、11采用JS脚本处理，需要使用JQuery，需要在网站全局变黑白需要在网站的全局模板页中实现下面的样式和代码

 

CSS样式部分：

<style type="text/css">

body,div,span,p,img{

-webkit-filter: grayscale(100%); /* webkit */

-moz-filter: grayscale(100%) !important; /*firefox*/

/*-ms-filter: grayscale(100%); ie9*/

-o-filter: grayscale(100%)!important; /*opera*/

filter: grayscale(100%);

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 

filter:gray; /*ie9- */      

}    

</style>

 

JQuery脚本代码：

<script>
var exports = {
    grayscale: function(image) {
        var self = this;

        // 检测是否支持标准滤镜
        var isUnsupport = (function() {

            if (document.msHidden != 'undefined') {
                var div = document.createElement('div'), value = 'grayscale(100%)';
                div.style.filter = value;

                return window.getComputedStyle(div).filter !== value;
            }
        })();

if (image && isUnsupport == true) {
            if (image.length > 0) {
                if (image.each) {
                    image.each(function() {
                        self.grayscale(this);
                    });
                } else if (image.forEach) {
                    image.forEach(function(img) {
                        self.grayscale(img);
                    });
                }
            } else if (/img/i.test(image.tagName)) {
                // 载入SVG滤镜
                if (!document.grayscale) {
                    document.body.insertAdjacentHTML('afterBegin', '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="dn">\
                <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>');
                    document.grayscale = true;
                }

                // 图片变SVG
                var cl = image.className, src = image.src;
                // 尺寸
                var width = image.clientWidth, height = image.clientHeight;

                if (!image.grayscale) {
                    image.insertAdjacentHTML('beforeBegin', '<svg class="'+ cl +'"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="'+ src 

+'" x="0" y="0" width="'+ width +'" height="'+ height +'" filter="url(\'#grayscale\')"></image></svg>');
                }
            } 

            return this;
        }

}

}
grayscale();
</script>

 以上为各个整理的方法，经过测试。以下是从各大平台网站中整理出来的代码，未测试过。

纯属css支持IE11（未测试，从搜狐截取，腾讯采用的是js脚本形式）

html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter id='grayscale'&gt;&lt;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'&gt;&lt;/fecolormatrix&gt;&lt;/filter>&lt;/svg&gt;#grayscale);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(1);
}

* {
    filter: gray;
}