cnblogs/dcrenl/网站页面全局变黑白灰（支持IE10，11及chorme，Opera，Firefox主流浏览器 ）.html

<p>为深切哀悼在抗击新冠肺炎疫情斗争中牺牲的烈士和逝世同胞，响应国务院发布的2020年4月4日全国性哀悼各大网站首页都设置为灰色，这里整理一下设置的方法。</p>
<p>使用css支持chrome、Opera、Firefox浏览器，对于IE10、11采用JS脚本处理，需要使用JQuery，需要在网站全局变黑白需要在网站的全局模板页中实现下面的样式和代码</p>
<p>&nbsp;</p>
<p>CSS样式部分：</p>
<div class="cnblogs_code">
<pre><span style="color: #800000;">&lt;style type="text/css"&gt;

body,div,span,p,img</span>{<span style="color: #ff0000;">

-webkit-filter</span>:<span style="color: #0000ff;"> grayscale(100%)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> webkit </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">

-moz-filter</span>:<span style="color: #0000ff;"> grayscale(100%) !important</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">firefox</span><span style="color: #008000;">*/</span>

<span style="color: #008000;">/*</span><span style="color: #008000;">-ms-filter: grayscale(100%); ie9</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">

-o-filter</span>:<span style="color: #0000ff;"> grayscale(100%)!important</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">opera</span><span style="color: #008000;">*/</span><span style="color: #ff0000;">

filter</span>:<span style="color: #0000ff;"> grayscale(100%)</span>;<span style="color: #ff0000;">

filter</span>:<span style="color: #0000ff;">progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)</span>;<span style="color: #ff0000;"> 

filter</span>:<span style="color: #0000ff;">gray</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">ie9- </span><span style="color: #008000;">*/</span>      

}<span style="color: #800000;">    

&lt;/style&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>JQuery脚本代码：</p>
<div class="cnblogs_code">
<pre>&lt;script&gt;
<span style="color: #0000ff;">var</span> exports =<span style="color: #000000;"> {
    grayscale: </span><span style="color: #0000ff;">function</span><span style="color: #000000;">(image) {
        </span><span style="color: #0000ff;">var</span> self = <span style="color: #0000ff;">this</span><span style="color: #000000;">;

        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 检测是否支持标准滤镜</span>
        <span style="color: #0000ff;">var</span> isUnsupport = (<span style="color: #0000ff;">function</span><span style="color: #000000;">() {

            </span><span style="color: #0000ff;">if</span> (document.msHidden != 'undefined'<span style="color: #000000;">) {
                </span><span style="color: #0000ff;">var</span> div = document.createElement('div'), value = 'grayscale(100%)'<span style="color: #000000;">;
                div.style.filter </span>=<span style="color: #000000;"> value;

                </span><span style="color: #0000ff;">return</span> window.getComputedStyle(div).filter !==<span style="color: #000000;"> value;
            }
        })();

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

                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 图片变SVG</span>
                <span style="color: #0000ff;">var</span> cl = image.className, src =<span style="color: #000000;"> image.src;
                </span><span style="color: #008000;">//</span><span style="color: #008000;"> 尺寸</span>
                <span style="color: #0000ff;">var</span> width = image.clientWidth, height =<span style="color: #000000;"> image.clientHeight;

                </span><span style="color: #0000ff;">if</span> (!<span style="color: #000000;">image.grayscale) {
                    image.insertAdjacentHTML(</span>'beforeBegin', '&lt;svg class="'+ cl +'"&gt;&lt;image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="'+<span style="color: #000000;"> src 

</span>+'" x="0" y="0" width="'+ width +'" height="'+ height +'" filter="url(\'#grayscale\')"&gt;&lt;/image&gt;&lt;/svg&gt;'<span style="color: #000000;">);
                }
            } 

            </span><span style="color: #0000ff;">return</span> <span style="color: #0000ff;">this</span><span style="color: #000000;">;
        }

}

}
grayscale();
</span>&lt;/script&gt;</pre>
</div>
<p>&nbsp;以上为各个整理的方法，经过测试。以下是从各大平台网站中整理出来的代码，未测试过。</p>
<p>纯属css支持IE11（未测试，从搜狐截取，腾讯采用的是js脚本形式）</p>
<div class="cnblogs_code">
<pre><span style="color: #800000;">html </span>{<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> grayscale(100%)</span>;<span style="color: #ff0000;">
    -webkit-filter</span>:<span style="color: #0000ff;"> grayscale(100%)</span>;<span style="color: #ff0000;">
    -moz-filter</span>:<span style="color: #0000ff;"> grayscale(100%)</span>;<span style="color: #ff0000;">
    -ms-filter</span>:<span style="color: #0000ff;"> grayscale(100%)</span>;<span style="color: #ff0000;">
    -o-filter</span>:<span style="color: #0000ff;"> grayscale(100%)</span>;<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> url(data:image/svg+xml</span>;<span style="color: #ff0000;">utf8,&amp;lt;svg xmlns='http</span>:<span style="color: #0000ff;">//www.w3.org/2000/svg'&amp;gt</span>;<span style="color: #ff0000;">&amp;lt;filter id='grayscale'&amp;gt;&amp;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'&amp;gt;&amp;lt;/fecolormatrix&amp;gt;&amp;lt;/filter&gt;&amp;lt;/svg&amp;gt;#grayscale);
    filter</span>:<span style="color: #0000ff;"> progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)</span>;<span style="color: #ff0000;">
    -webkit-filter</span>:<span style="color: #0000ff;"> grayscale(1)</span>;
}<span style="color: #800000;">

* </span>{<span style="color: #ff0000;">
    filter</span>:<span style="color: #0000ff;"> gray</span>;
}</pre>
</div>
<p>&nbsp;</p>