实现页面变成灰色色调

1 css实现

body *{

-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
filter:gray; /*ie9- */
}

对于ie10 ie11 不支持filter属性

针对ie10 ie11，

方法1：强制页面ie9渲染

<meta http-equiv="x-ua-compatible" content="IE=EmulateIE9"/>

2 使用grayscale.js

 $(document).ready(function(){
        var navStr = navigator.userAgent.toLowerCase();
         if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ 
                        grayscale(document.body);
                     grayscale(document.getElementsByTagName("img"));
                    }
    });

只针对 ie10 ie11，因为很耗资源，所以加载起来比较慢

grayscale(document.body); //整站变成灰色
grayscale(document.getElementById("main"));//指定元素变灰色
grayscale.reset(document.getElementById("main"));//指定元素还原