css3 让图片变成灰色(filter)，但针对IE11浏览器无效

Question

想要设置网站图片默认为灰色，鼠标经过时显示为彩色 在网上找了很多方法， 修改css后，在非IE浏览器内都可以正常显示为灰色，但在IE11浏览器内一直为彩色查看好多教程，说是IE6-9都可以，但更高版本就不行了，有...

怪我咯 · Answer

If the image format is not SVG, the filter is not supported on IE browser.
If it is svg, filter is only supported on ie10 and 11.
See caniuse for details

迷茫 · Answer

It may be that the current IE version is not compatible with some CSS3 properties

PHP中文网 · Answer

svg or canvas

天蓬老师 · Answer

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