JS+CSS网站整站变黑白效果（兼容IE和主流浏览器）

如果只需要兼容主流浏览器可以使用css的 filter 属性（Chrome内核）

将代码放入前端即可让对应网页变黑灰色！filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。

这段代码可以实现Chrome内核浏览器的显示效果

<style type="text/css">
html {
    -webkit-filter: grayscale(100%);
}
</style>

这个滤镜普通写法对于 chrome 和 safari 浏览器是无效的，所以可以使用下面的兼容性写法，达到兼容更多浏览器的作用。

以下适用于主流浏览器（除IE外），放置在网站公共头部或者底部文件里

<style> 
    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:none; 
    } 
</style>

如果需要对IE浏览器进行兼容

还需要使用到一个JS，两者搭配可以达到较好的兼容性

引入到页面中并指定变黑白的部分即可，如果指定全部，使用body就可以了

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

需要附件请联系佳速互联