网站页面全局变黑白灰（支持IE10，11及chorme，Opera，Firefox主流浏览器 ）

<style type="text/css">

body,div,span,p,img{

-webkit-filter: grayscale(100%); /* webkit */

-moz-filter: grayscale(100%) !important; /*firefox*/

/*-ms-filter: grayscale(100%); ie9*/

-o-filter: grayscale(100%)!important; /*opera*/

filter: grayscale(100%);

filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 

filter:gray; /*ie9- */      

}    

</style>

<script>
var exports = {
    grayscale: function(image) {
        var self = this;

        // 检测是否支持标准滤镜
        var isUnsupport = (function() {

            if (document.msHidden != ‘undefined‘) {
                var div = document.createElement(‘div‘), value = ‘grayscale(100%)‘;
                div.style.filter = value;

                return window.getComputedStyle(div).filter !== value;
            }
        })();

if (image && isUnsupport == true) {
            if (image.length > 0) {
                if (image.each) {
                    image.each(function() {
                        self.grayscale(this);
                    });
                } else if (image.forEach) {
                    image.forEach(function(img) {
                        self.grayscale(img);
                    });
                }
            } else if (/img/i.test(image.tagName)) {
                // 载入SVG滤镜
                if (!document.grayscale) {
                    document.body.insertAdjacentHTML(‘afterBegin‘, ‘<svg version="1.1" xmlns="http://www.w3.org/2000/svg" class="dn">                <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>‘);
                    document.grayscale = true;
                }

                // 图片变SVG
                var cl = image.className, src = image.src;
                // 尺寸
                var width = image.clientWidth, height = image.clientHeight;

                if (!image.grayscale) {
                    image.insertAdjacentHTML(‘beforeBegin‘, ‘<svg class="‘+ cl +‘"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="‘+ src 

+‘" x="0" y="0" width="‘+ width +‘" height="‘+ height +‘" filter="url(\‘#grayscale\‘)"></image></svg>‘);
                }
            } 

            return this;
        }

}

}
grayscale();
</script>