轉(zhuǎn)載:
各大站通用首頁變灰代碼：依次排序：百度蝙昙、淘寶（京東）杭棵、網(wǎng)易云音樂客年、360首頁坊罢、騰...#掘金沸點(diǎn)#

            /*****baidu******/
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: gray;
            /*****淘寶*****/
            -webkit-filter: grayscale(100%);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
           /****網(wǎng)易云音樂*****/
            /*兼容ff*/
            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");
            /*IE*/
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            other，谷歌
            -webkit-filter: grayscale(1);
           /***360***/
            -webkit-filter: saturate(0);
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            /****騰訊*****/
            filter: grayscale(100%);
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            -webkit-filter: grayscale(1);
            /*****掘金******/
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
            filter: #808080;
            /*****CSDN******/
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
             filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            /*****中央政府*****/
            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");
            -webkit-filter: grayscale(100%);
            -moz-filter: grayscale(100%);
            -ms-filter: grayscale(100%);
            -o-filter: grayscale(100%);
            filter: grayscale(100%);
             filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            filter: gray;
            /*****國務(wù)院新聞辦公室*****/
            div, p, h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,pre,form,fieldset,legend,button,input,textarea,table,th,td,img,b,i,em {
                filter: grayscale(100%);
                -webkit-filter: grayscale(100%);
                filter: gray;
            }

轉(zhuǎn)載：破丶曉風(fēng) 鏈接：http://www.reibang.com/p/f840d1331958
以上代碼不支持IE11
IE11可使用JQ插件解決
先引入JQ
<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>
grayscale(document.getElementsByTagName("img"));
另兩款JQ插件
https://gianlucaguarini.com/jQuery.BlackAndWhite/
https://work.karlhorky.com/gray/

• 圖片半透明顯示

filter: alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;

這行代碼在IE和firefox下都半透明顯示 。