IE浏览器的CSS滤镜灰度图像10

Question

有没有一种方法可以在没有JavaScript或SVG的情况下在IE 10上生成灰度图像过滤器？

我已经成功地使用下面的代码在所有浏览器除了IE以外10

img{ 
filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter  id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /*  Firefox 10+, Firefox on Android */ 
filter:gray; /* IE6-9 */ 
-webkit-filter:grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ 
-moz-filter: grayscale(100%); 
-o-filter: grayscale(100%);} 

Answer 1

这种方法只适用于WebKit和Firefox浏览器。它在IE或Opera中不起作用。 WebKit是目前唯一支持CSS过滤器的浏览器，而Firefox则支持HTML上的SVG过滤器。 Opera和IE支持SVG过滤器，但仅限于SVG内容。

没有好的方法可以在IE10中完成这项工作，因为它放弃了对传统IE过滤器的支持。有一种方法，但是，我不会推荐它。

您可以设置IE10使用以下元元的头使用IE9标准模式来呈现：

<meta http-equiv="X-UA-Compatible" content="IE=9"> 

这将重新开启对传统IE过滤器的支持。但是，它具有将IE下降到IE9模式的副作用，IE9中的最新进展将不再受支持。在您的情况下，您可能目前不需要这些新功能，但如果沿着这条路走下去，您将来需要在更新网站时注意它。

Answer 2

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js/

http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-image-example-using-css3-js-v2-0-with-browser-feature-detection-using-modernizr/

上面的链接给出> IE10和其他浏览器好主意。

Answer 3

这是使用HTML5和jQuery使用淡入淡出效果

Code

Demo