互联网浏览器10 - 如何应用灰度滤波器? [英] internet explorer 10 - howto apply grayscale filter?
问题描述
这个CSS代码对于Internet Explorer来说非常不错,直到9。
This CSS code works pretty nice for Internet Explorer until 9.
img.gray {
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");
filter: gray;
-webkit-filter: grayscale(1);
}
但是我需要为Internet Explorer 10做什么?
But what do I need to do for Internet Explorer 10 ?
推荐答案
IE10不支持DX过滤器,如IE9和更早版本所做的,也不支持灰度过滤器的前缀版本。
IE10 does not support DX filters as IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter.
但是,您可以在IE10中使用SVG叠加层来完成灰度。示例:
However, you can use an SVG overlay in IE10 to accomplish the greyscaling. Example:
img.grayscale: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");
}
svg {
background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}
(from: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html a>)
简化JSFiddle: http://jsfiddle.net/ KatieK / qhU7d / 2 /
Simplified JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/
有关IE10 SVG滤镜效果的更多信息: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects -in-ie10.aspx
More about the IE10 SVG filter effects: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
这篇关于互联网浏览器10 - 如何应用灰度滤波器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!