首先，你需要在一个svg里声明滤镜，该svg可以内嵌到html文件里，也可以单独保存。

[html] view plaincopy

如果该文件保存成了单独的文件gray.svg，我们可以在html文件里加以引用。

[css] view plaincopy

img{

filter:url('gray.svg#grayscale'); /*灰度滤镜放在gray.svg文件的id叫做grayscale的滤镜里*/

}

如果该文件内嵌入了html文件里，则是这样引用

[css] view plaincopy

img{

filter:url('#grayscale'); /*svg滤镜内嵌入了html文件*/

}

当然，我们也可以直接把svg文件打包嵌入到css里，如果你没有代码洁癖的话

[css] view plaincopy

img {

filter: url('url("data:image/svg+xml;utf8,

200.3333%200%200%200%200%200%201%200'/>

#grayscale");')

}

上面的方式，我们可以兼容大部分的浏览器(除了IE10、IE11)，兼容的grayscale代码如下。

[css] view plaincopy

img{

-webkit-filter: grayscale(100%);            /* CSS3 filter方式，webkit内核方式，firefox外的绝大部分的现代浏览器*/

-moz-filter: grayscale(100%);            /* 目前没有实现 */

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

filter: grayscale(100%);            /* CSS3 filter方式，标准写法*/

filter: url(filters.svg#grayscale); /* Firefox 4+ */

filter: gray;                       /* IE 6-9 */

}

img:hover{

-webkit-filter: grayscale(0%);

-moz-filter: grayscale(0%);

-ms-filter: grayscale(0%);

-o-filter: grayscale(0%);

filter: grayscale(0%);

filter: none; /* Firefox 4+, IE 6-9 */

}

4.js实现

对于IE10、11，我们怎么办呢？就得用js啦。

[javascript] view plaincopy

var imgObj = document.getElementById('imgToGray');

function gray(imgObj) {

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

var canvasContext = canvas.getContext('2d');

var imgW = imgObj.width;

var imgH = imgObj.height;

canvas.width = imgW;

canvas.height = imgH;

canvasContext.drawImage(imgObj, 0, 0);

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

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

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

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

var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;

imgPixels.data[i] = avg;

imgPixels.data[i + 1] = avg;

imgPixels.data[i + 2] = avg;

}

}

canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

}

imgObj.src = gray(imgObj);

该解决方案主要参考ajaxblender的《Convert Images to Grayscale》，大家可以继续阅读查阅详情。

5.跨浏览器解决方案

该方案主要参考《Cross-Browser Grayscale image example using CSS3 + JS v2.0. With browser feature detection using Modernizr》实现，英语没问题的童鞋可以移步观赏。博主写了两篇关于使用js实现跨浏览器解决灰度图像问题的博客，第一篇自行实现浏览器检测，第二篇使用了Modernizr。

该解决方案使用了jQuery和Modernizr，所以需要引入，此处省略，不知道怎么引入的童鞋，请自觉撞南墙100次。

对于IE浏览器

[javascript] view plaincopy

// IE 10 only CSS properties

var ie10Styles = [

'msTouchAction',

'msWrapFlow'];

var ie11Styles = [

'msTextCombineHorizontal'];

/*

* Test all IE only CSS properties

*/

var d = document;

var b = d.body;

var s = b.style;

var brwoser = null;

var property;

// Tests IE10 properties

for (var i = 0; i < ie10Styles.length; i++) {

property = ie10Styles[i];

if (s[property] != undefined) {

brwoser = "ie10";

}

}

// Tests IE11 properties

for (var i = 0; i < ie11Styles.length; i++) {

property = ie11Styles[i];

if (s[property] != undefined) {

brwoser = "ie11";

}

}

//Grayscale images only on browsers IE10+ since they removed support for CSS grayscale filter

if(brwoser == "ie10" || brwoser == "ie11" ){

$('body').addClass('ie11'); // Fixes marbin issue on IE10 and IE11 after canvas function on images

$('.grayscale img').each(function(){

var el = $(this);

el.css({"position":"absolute"}).wrap("