CSS Internet Explorer 10 - 如何应用灰度过滤器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14813142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
internet explorer 10 - how to apply grayscale filter?
提问by jellobird
This CSS code works pretty nice for Internet Explorer until 9.
这个 CSS 代码在 9 之前对 Internet Explorer 工作得很好。
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);
}
But what do I need to do for Internet Explorer 10 ?
但是我需要为 Internet Explorer 10 做什么？
采纳答案by KatieK
IE10 does not support DX filtersas IE9 and earlier have done, nor does it support a prefixed version of the greyscale filter.
IE10 不像IE9 和更早版本那样支持 DX 过滤器，也不支持带前缀的灰度过滤器版本。
However, you can use an SVG overlay in IE10 to accomplish the greyscaling. Example:
但是，您可以在 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);
}
(from: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
（来自：http: //www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）
Simplified JSFiddle: http://jsfiddle.net/KatieK/qhU7d/2/
简化的 JSFiddle：http: //jsfiddle.net/KatieK/qhU7d/2/
More about the IE10 SVG filter effects: http://blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
更多关于 IE10 SVG 滤镜效果：http: //blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx
回答by Karl Horky
Inline SVG can be used in IE 10 and 11 and Edge 12.
内联 SVG 可用于 IE 10 和 11 以及 Edge 12。
I've created a project called gray which includes a polyfill for these browsers. The polyfill switches out <img>tags with inline SVG: https://github.com/karlhorky/gray
我创建了一个名为 gray 的项目，其中包含用于这些浏览器的 polyfill。polyfill<img>使用内联 SVG切换标签：https: //github.com/karlhorky/gray
To implement, the short version is to download the jQuery plugin at the GitHub link above and add after jQuery at the end of your body:
要实现，简短的版本是在上面的 GitHub 链接下载 jQuery 插件，并在 body 末尾添加 jQuery：
<script src="/js/jquery.gray.min.js"></script>
Then every image with the class grayscalewill appear as gray.
然后每个带有该类的图像grayscale都将显示为灰色。
<img src="/img/color.jpg" class="grayscale">
You can see a demotoo if you like.
如果您愿意，您也可以观看演示。
回答by Corni
Use this jQuery plugin https://gianlucaguarini.github.io/jQuery.BlackAndWhite/
使用这个 jQuery 插件 https://gianlucaguarini.github.io/jQuery.BlackAndWhite/
That seems to be the only one cross-browser solution. Plus it has a nice fade in and fade out effect.
这似乎是唯一的一种跨浏览器解决方案。此外，它还具有不错的淡入淡出效果。
$('.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
}
});
