如何将网站变成灰白色？

    问题：如何将网站变成灰白色?

    解决：

    方法一：直接在html文档的head区域加上以下代码

    1：复制内容到剪贴板
    代码:
    <style>
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
</style>

    2：在css文档种加入以下代码
    复制内容到剪贴板
代码:
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的<object …>和</object>之间插入：
代码:
<param ="false" name="menu"/>
<param ="opaque" name="wmode"/>

    方法二、这里有个方法可以迅速把你的网站变成灰调，就是给body加个css滤镜。 
body {filter:gray;}

    既然说了是css滤镜，那么只能是在IE下支持了。firefox下浏览照样还是彩色的。并且有一点，flash里的图片不会变灰。
flash变灰的方法：object 之间加入
<param value='false' name='menu'/>
<param value='opaque' name='wmode'/>

    方法三、动易提供的方法

1.上传js代码到目录 /mmskin/js/

2.以下代码放到首页模板最下方

<!-- 全站变灰 可自行修改时间 -->

  <script type="text/javascript">

        var now = new Date();

        var startDate = new Date('2022/11/30 00:00:00');

        var endDate = new Date('2022/12/13 23:59:59');

        if (now >= startDate && now <= endDate) {

            document.write("<style>html,body,img{filter: grayscale(100%); filter: gray !important;  -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%} body{background:#8a8a8a}</style>");

        }

    </script>

<!-- ////// 特殊日子全站灰色，可修改grayscale.js地址 ////// -->

<script src="/mmskin/js/grayscale.js"type=" text/javascript" language=" javasoript ></script>

<script type="text/javascript">

    var navStr = navigator.userAgent.toLowerCase();

    if (now >= startDate && now <= endDate) {

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

            grayscale(document.body);

        }

    }

</script> 

</script>

3.下面是grayscale.js代码

/*

 * -- grayscale.js --

 * Copyright (C) James Padolsey (http://james.padolsey.com)

 *

 */

var grayscale = (function(){

    var config = {

            colorProps: ['color','backgroundColor','borderBottomColor','borderTopColor','borderLeftColor','borderRightColor','backgroundImage'],

            externalImageHandler : {

                /* Grayscaling externally hosted images does not work

                   - Use these functions to handle those images as you so desire */

                /* Out of convenience these functions are also used for browsers

                   like Chrome that do not support CanvasContext.getImageData */

                init : function(el, src) {

                    if (el.nodeName.toLowerCase() === 'img') {

                        // Is IMG element...

                    } else {

                        // Is background-image element:

                        // Default - remove background images

                        data(el).backgroundImageSRC = src;

                        el.style.backgroundImage = '';

                    }

                },

                reset : function(el) {

                    if (el.nodeName.toLowerCase() === 'img') {

                        // Is IMG element...

                    } else {

                        // Is background-image element:

                        el.style.backgroundImage = 'url(' + (data(el).backgroundImageSRC || '') + ')';

                    }

                }

            }

        },

        log = function(){

            try { window.console.log.apply(console, arguments); }

            catch(e) {};

        },

        isExternal = function(url) {

            // Checks whether URL is external: 'CanvasContext.getImageData'

            // only works if the image is on the current domain.

            return (new RegExp('https?://(?!' + window.location.hostname + ')')).test(url);

        },

        data = (function(){

            var cache = [0],

            expando = 'data' + (+new Date());

            return function(elem) {

                var cacheIndex = elem[expando],

                    nextCacheIndex = cache.length;

                if(!cacheIndex) {

                    cacheIndex = elem[expando] = nextCacheIndex;

                    cache[cacheIndex] = {};

                }

                return cache[cacheIndex];

            };

        })(),

        desatIMG = function(img, prepare, realEl) {

            // realEl is only set when img is temp (for BG images)

            var canvas = document.createElement('canvas'),

                context = canvas.getContext('2d'),

                height = img.naturalHeight || img.offsetHeight || img.height,

                width = img.naturalWidth || img.offsetWidth || img.width,

                imgData;

            canvas.height = height;

            canvas.width = width;

            context.drawImage(img, 0, 0);

            try {

                imgData = context.getImageData(0, 0, width, height);

            } catch(e) {}

            if (prepare) {

                desatIMG.preparing = true;

                // Slowly recurse through pixels for prep,

                // :: only occurs on grayscale.prepare()

                var y = 0;

                (function(){

                    if (!desatIMG.preparing) { return; }

                    if (y === height) {

                        // Finished!

                        context.putImageData(imgData, 0, 0, 0, 0, width, height);

                        realEl ? (data(realEl).BGdataURL = canvas.toDataURL())

                               : (data(img).dataURL = canvas.toDataURL())

                    }

                    for (var x = 0; x < width; x++) {

                        var i = (y * width + x) * 4;

                        // Apply Monoschrome level across all channels:

                        imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =

                        RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);

                    }

                    y++;

                    setTimeout(arguments.callee, 0);

                })();

                return;

            } else {

                // If desatIMG was called without 'prepare' flag

                // then cancel recursion and proceed with force! (below)

                desatIMG.preparing = false;

            }

            for (var y = 0; y < height; y++) {

                for (var x = 0; x < width; x++) {

                    var i = (y * width + x) * 4;

                    // Apply Monoschrome level across all channels:

                    imgData.data[i] = imgData.data[i+1] = imgData.data[i+2] =

                    RGBtoGRAYSCALE(imgData.data[i], imgData.data[i+1], imgData.data[i+2]);

                }

            }

            context.putImageData(imgData, 0, 0, 0, 0, width, height);

            return canvas;

        },

        getStyle = function(el, prop) {

            var style = document.defaultView && document.defaultView.getComputedStyle ? 

                        document.defaultView.getComputedStyle(el, null)[prop]

                        : el.currentStyle[prop];

            // If format is #FFFFFF: (convert to RGB)

            if (style && /^#[A-F0-9]/i.test(style)) {

                    var hex = style.match(/[A-F0-9]{2}/ig);

                    style = 'rgb(' + parseInt(hex[0], 16) + ','

                                   + parseInt(hex[1], 16) + ','

                                   + parseInt(hex[2], 16) + ')';

            }

            return style;

        },

        RGBtoGRAYSCALE = function(r,g,b) {

            // Returns single monochrome figure:

            return parseInt( (0.2125 * r) + (0.7154 * g) + (0.0721 * b), 10 );

        },

        getAllNodes = function(context) {

            var all = Array.prototype.slice.call(context.getElementsByTagName('*'));

            all.unshift(context);

            return all;

        };

    var init = function(context) {

        // Handle if a DOM collection is passed instead of a single el:

        if (context && context[0] && context.length && context[0].nodeName) {

            // Is a DOM collection:

            var allContexts = Array.prototype.slice.call(context),

                cIndex = -1, cLen = allContexts.length;

            while (++cIndex<cLen) { init.call(this, allContexts[cIndex]); }

            return;

        }

        context = context || document.documentElement;

        if (!document.createElement('canvas').getContext) {

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

            context.style.zoom = 1;

            return;

        }

        var all = getAllNodes(context),

            i = -1, len = all.length;

        while (++i<len) {

            var cur = all[i];

            if (cur.nodeName.toLowerCase() === 'img') {

                var src = cur.getAttribute('src');

                if(!src) { continue; }

                if (isExternal(src)) {

                    config.externalImageHandler.init(cur, src);

                } else {

                    data(cur).realSRC = src;

                    try {

                        // Within try statement just encase there's no support....

                        cur.src = data(cur).dataURL || desatIMG(cur).toDataURL();

                    } catch(e) { config.externalImageHandler.init(cur, src); }

                }

            } else {

                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {

                    var prop = config.colorProps[pIndex],

                    style = getStyle(cur, prop);

                    if (!style) {continue;}

                    if (cur.style[prop]) {

                        data(cur)[prop] = style;

                    }

                    // RGB color:

                    if (style.substring(0,4) === 'rgb(') {

                        var monoRGB = RGBtoGRAYSCALE.apply(null, style.match(/\d+/g));

                        cur.style[prop] = style = 'rgb(' + monoRGB + ',' + monoRGB + ',' + monoRGB + ')';

                        continue;

                    }

                    // Background Image:

                    if (style.indexOf('url(') > -1) {

                        var urlPatt = /\(['"]?(.+?)['"]?\)/,

                            url = style.match(urlPatt)[1];

                        if (isExternal(url)) {

                            config.externalImageHandler.init(cur, url);

                            data(cur).externalBG = true;

                            continue;

                        }

                        // data(cur).BGdataURL refers to caches URL (from preparation)

                        try {

                            var imgSRC = data(cur).BGdataURL || (function(){

                                    var temp = document.createElement('img');

                                    temp.src = url;

                                    return desatIMG(temp).toDataURL();

                                })();

                            cur.style[prop] = style.replace(urlPatt, function(_, url){

                                return '(' + imgSRC + ')';

                            });

                        } catch(e) { config.externalImageHandler.init(cur, url); }

                    }

                }

            }

        }

    };

    init.reset = function(context) {

        // Handle if a DOM collection is passed instead of a single el:

        if (context && context[0] && context.length && context[0].nodeName) {

            // Is a DOM collection:

            var allContexts = Array.prototype.slice.call(context),

                cIndex = -1, cLen = allContexts.length;

            while (++cIndex<cLen) { init.reset.call(this, allContexts[cIndex]); }

            return;

        }

        context = context || document.documentElement;

        if (!document.createElement('canvas').getContext) {

            context.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=0)';

            return;

        }

        var all = getAllNodes(context),

            i = -1, len = all.length;

        while (++i<len) {

            var cur = all[i];

            if (cur.nodeName.toLowerCase() === 'img') {

                var src = cur.getAttribute('src');

                if (isExternal(src)) {

                    config.externalImageHandler.reset(cur, src);

                }

                cur.src = data(cur).realSRC || src;

            } else {

                for (var pIndex = 0, pLen = config.colorProps.length; pIndex < pLen; pIndex++) {

                    if (data(cur).externalBG) {

                        config.externalImageHandler.reset(cur);

                    }

                    var prop = config.colorProps[pIndex];

                    cur.style[prop] = data(cur)[prop] || '';

                }

            }

        }

    };

    init.prepare = function(context) {

        // Handle if a DOM collection is passed instead of a single el:

        if (context && context[0] && context.length && context[0].nodeName) {

            // Is a DOM collection:

            var allContexts = Array.prototype.slice.call(context),

                cIndex = -1, cLen = allContexts.length;

            while (++cIndex<cLen) { init.prepare.call(null, allContexts[cIndex]); }

            return;

        }

        // Slowly recurses through all elements

        // so as not to lock up on the user.

        context = context || document.documentElement;

        if (!document.createElement('canvas').getContext) { return; }

        var all = getAllNodes(context),

            i = -1, len = all.length;

        while (++i<len) {

            var cur = all[i];

            if (data(cur).skip) { return; }

            if (cur.nodeName.toLowerCase() === 'img') {

                if (cur.getAttribute('src') && !isExternal(cur.src)) {

                    desatIMG(cur, true);

                }

            } else {

                var style = getStyle(cur, 'backgroundImage');

                if (style.indexOf('url(') > -1) {

                    var urlPatt = /\(['"]?(.+?)['"]?\)/,

                        url = style.match(urlPatt)[1];

                    if (!isExternal(url)) {

                        var temp = document.createElement('img');

                        temp.src = url;

                        desatIMG(temp, true, cur);

                    }

                }

            }

        }

    };

    return init;

})();