如何将网站变成灰白色？

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

解决：

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

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

2：在css文档种加入以下代码
复制内容到剪贴板
代码:
html { filter:progid:D×ImageTransform.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:D×ImageTransform.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:D×ImageTransform.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;

})();