此 CSS 代码在 Internet Explorer 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 做什么？
IE10不支持DX滤镜正如 IE9 及更早版本所做的那样，它也不支持灰度滤镜的前缀版本。
但是，您可以在 IE10 中使用 SVG 叠加来完成灰度化。例子：
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)
简化的 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
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
