这个 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 做些什么呢？
【问题讨论】：
标签： internet-explorer css internet-explorer-10
使用这个 jQuery 插件 https://gianlucaguarini.github.io/jQuery.BlackAndWhite/
这似乎是唯一一种跨浏览器解决方案。此外，它还有一个很好的淡入淡出效果。
$('.bwWrapper').BlackAndWhite({
hoverEffect : true, // default true
// set the path to BnWWorker.js for a superfast implementation
webworkerPath : false,
// to invert the hover effect
invertHoverEffect: false,
// this option works only on the modern browsers ( on IE lower than 9 it remains always 1)
intensity:1,
speed: { //this property could also be just speed: value for both fadeIn and fadeOut
fadeIn: 200, // 200ms for fadeIn animations
fadeOut: 800 // 800ms for fadeOut animations
},
onImageReady:function(img) {
// this callback gets executed anytime an image is converted
}
});
内联 SVG 可用于 IE 10 和 11 以及 Edge 12。
我创建了一个名为 gray 的项目，其中包含用于这些浏览器的 polyfill。 polyfill 使用内联 SVG 切换 <img> 标签：https://github.com/karlhorky/gray
要实现，简短的版本是在上面的GitHub链接下载jQuery插件，并在你的body末尾添加jQuery：
<script src="/js/jquery.gray.min.js"></script>
那么每个类grayscale的图像都会显示为灰色。
<img src="/img/color.jpg" class="grayscale">
如果你愿意，你也可以see a demo。
【讨论】：
IE10 does not support DX filters 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);
}
（来自：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
【讨论】：