有的网站可能需要用到全站黑白功能(一般常用于悼念日) ，最方便就是增加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：

<a href="javascript:;" class="site-gray" data-gray="0">网站变灰</a>

<!-- 特殊日子IE10及其以上浏览器 全站灰色 -->
<script src="js/grayscale.js"></script>
<script>
    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);
        }
    });
</script>

grayscale.js下载：