Internet Explorer的10 - 如何申请灰阶过滤器？(internet explor

这个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:

IE10不支持DX滤镜为IE9和更早版本都做了，也不支持灰阶过滤器的前缀版本。

但是，你可以使用SVG叠加在IE10来完成greyscaling。例：

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

Answer 2:

联SVG可以在IE 10和11被使用和边缘12。

我创建了一个名为灰色的项目，其中包括为这些浏览器中填充工具。在填充工具切换出<img>标记带内嵌SVG： https://github.com/karlhorky/gray

要实现，短版是下载的jQuery插件在上面的链接GitHub的，在你的身体结束后jQuery的添加：

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

然后用类中的每个图像grayscale将显示为灰色。

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

你可以看到一个演示太多，如果你喜欢。

Answer 3:

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

这似乎是唯一一个跨浏览器的解决方案。再加上它有一个很好的淡入和淡出效果。

文章来源: internet explorer 10 - how to apply grayscale filter?