Internet Explorer 10 - 如何应用灰度过滤器？

这个CSS代码工作相当不错的Internet Explorer 9之前Internet Explorer 10 - 如何应用灰度过滤器？

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

来源

2013-02-11 jellobird

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

来源

2013-02-11 18:59:57 KatieK

感谢您的建议 – jellobird 2013-02-28 17:15:56

如果没有在CSS中引用图片网址，有没有办法实现这一点？我试图让这个工作在一个包含多个图像的页面上，所以我想我可以将每个图像添加到CSS中的

...很不错，但它是IE！ – patrickzdb 2013-06-18 13:02:10

你应该问这是一个全新的问题。在这里添加一个链接，但一定要有示例代码（在Q和jsFiddle中），以便有人能够理解你的目标。我很困惑，因为你根本没有使用URL来引用图片。 – KatieK 2013-06-19 02:02:07

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

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

来源

2013-11-23 20:31:33 Corni

看起来人们一直在低调，因为链接不再工作，他们懒得去查看它。所以这里有一个新的链接：https：//gianlucaguarini.github.io/jQuery.BlackAndWhite/ – Sygmoral 2016-04-18 00:24:41

谢谢！我更新了我原来的帖子。 – Corni 2016-04-19 06:46:24

内嵌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">

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

来源

2014-02-12 22:28:00

这确实是我遇到的最好的灰度JS插件，我尝试了5个，做得很好！ – 2014-04-18 08:12:57

干杯，很高兴帮助！ – 2014-04-19 18:56:32

从2015年开始，**谢谢**！这个插件是一种拯救生命的东西，我在过去两天一直在寻找互联网来寻找这种类型的解决方案。 *谢谢！* – Singular1ty 2015-08-05 02:08:39

Internet Explorer 10 - 如何应用灰度过滤器？

回答

相关问题