Internet Explorer 10 – 如何应用灰度filter？
这个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不支持DXfilter，因为IE9和更早版本已经完成，也不支持灰度filter的前缀版本。
但是，您可以在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
内联SVG可以在IE 10和11和Edge 12中使用。
我创build了一个名为gray的项目，其中包含这些浏览器的polyfill。 使用内联SVG将polyfill转换为<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">
如果你喜欢，你也可以看到一个演示 。
使用这个jQuery插件https://gianlucaguarini.github.io/jQuery.BlackAndWhite/
这似乎是唯一一个跨浏览器的解决scheme。 加上它有一个很好的淡入淡出效果。
