Question

这个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做些什么？

Answer 1

IE9及更早版本已经完成了

IE10 does not support DX filters，也没有支持灰度过滤器的前缀版本。

但是，您可以在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）

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

Answer 2

内联SVG可用于IE 10和11以及Edge 12.

我创建了一个名为gray的项目，其中包含这些浏览器的polyfill。 polyfill会使用内嵌SVG切换<img>标记：https://github.com/karlhorky/gray

要实现，简短的版本是在上面的GitHub链接下载jQuery插件，并在你的身体末端添加jQuery：

<script src="/js/jquery.gray.min.js"></script>

然后，每个具有班级grayscale的图片都会显示为灰色。

<img src="/img/color.jpg" class="grayscale">

如果您愿意，也可以see a demo。

Answer 3

使用此jQuery插件 https://gianlucaguarini.github.io/jQuery.BlackAndWhite/

这似乎是唯一一个跨浏览器的解决方案。此外，它具有良好的淡入淡出效果。

internet explorer 10 - 如何应用灰度滤镜？

3 个答案: