网页变灰的方法，适用于IE
在哀悼日的时候如何让网页变灰？
1、适用于谷歌、火狐、360极速模式的代码
html{ filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,#grayscale"); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
zoom: 1; }
但是上面的代码不兼容IE低版本的浏览器
2、适用于IE版本的使网页变灰的代码
1）、检查网页代码中的meta标签中是否写了以下代码
content=“IE=EmulateIE9”
content中的IE版本EmulateIE7、EmulateIE8、EmulateIE9都可以，之前的代码是content=“IE=edge”，用IE浏览器访问网站的时候也不变灰，当时都有点抓狂了
2）、css样式中添加样式、或者在网页中直接添加
*{
filter: gray(enabled=1) !important;
}
或者（我为了保险起见，两段代码都添加了）
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
filter: gray(enabled=1) !important;
}
3）、很重要的一步：添加使网页变灰的js代码
<script>
/*
* -- 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;
})();
grayscale(document.body);
$(function () {
console.log("grayscale");
grayscale(document.body);
})
</script>
以上就是兼容IE浏览器的使网页变灰的代码