有的网站可能需要用到全站黑白功能(一般常用于悼念日) ，最方便就是增加css代码，但经测试不兼容IE10、11浏览器，所以配合grayscale.js这个插件，可以完美兼容所有浏览器，这里我制作了个一键变黑白的按钮， 按钮代码用到了JQ，需引用，可点击下面看效果：

点击这里页面变黑白

CSS：

/* 特殊日子 全站灰色 */

.site-gray, .site-gray *{

filter: gray !important;

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%);

}

HTML及JS：

网站变灰

var navStr = navigator.userAgent.toLowerCase();

$(".site-gray").click(function(){

var gray = $(this).attr("data-gray");

if( gray == 0 )

{

if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11

grayscale(document.body);

grayscale(document.getElementsByTagName("img"));

}

$("html").addClass("site-gray");

$(this).attr("data-gray", 1);

}

else

{

if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11

grayscale.reset(document.body);

grayscale.reset(document.getElementsByTagName("img"));

}

$("html").removeClass("site-gray");

$(this).attr("data-gray", 0);

}

});

grayscale.js下载：