問題描述

想要設置網站圖片默認為灰色，鼠標經過時顯示為彩色

在網上找了很多方法， 修改css后，在非IE瀏覽器內都可以正常顯示為灰色，但在IE11瀏覽器內一直為彩色查看好多教程，說是IE6-9都可以，但更高版本就不行了，有什么好辦法沒有

代碼如下:

{-webkit-filter: grayscale(1);-moz-filter: grayscale(1);filter: grayscale(1);-ms-filter: grayscale(1);-o-filter: grayscale(1);filter: gray;}

請各位幫忙看看是什么原因

問題解答

如果不是svg的圖片格式，filter在ie瀏覽器上都不支持。如果是svg的話，filter也只是在ie10和11上支持。詳細見caniuse

可能是當前的IE版本不兼容部分CSS3屬性哦

svg或者canvas

可以使用canvas

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);