灰度颜色在IE 11浏览器中不起作用 [英] Grayscale color not working in IE 11 Browser

问题描述

我想在加载时以灰色显示图像，当用户将鼠标悬停在图像上时，它应该显示图像的原始颜色.

I want show an image in gray color when it's loaded, when user hover on the image it should show original color of image.

我尝试了下面的代码，它可以在chrome浏览器中使用，但不能在IE浏览器中使用

i tried below code, it's working in chrome browser, but not working in IE Browser

CSS代码:

.testImage img {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    transition: filter 600ms ease;
    -webkit-transition: -webkit-filter 600ms ease;
    -o-transition: filter 600ms ease;
    -moz-transition: filter 600ms ease;
    -ms-transition: filter 600ms ease;

}

.testImage img:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);   
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
}

<div class="testImage">   

<img title="Sample Title" src="http://www.w3schools.com/html/pic_mountain.jpg">
    
</div>

JSFiddle链接: https://jsfiddle.net/samalaraj72/ehu77xy7/1/

请帮助我如何在IE浏览器中解决此问题，

please help me how to fix this issue in IE Browser,

谢谢.

推荐答案

尝试一下

testImage img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

这篇关于灰度颜色在IE 11浏览器中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！