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

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

- jellobird

Answer 1

IE10不支持DX滤镜，就像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

- KatieK

---

有没有不在CSS中引用图像URL的实现方法？我正在尝试在一个包含多个图像的页面上实现这个功能，所以我想我可以将每个图像添加到<header>中的CSS中... 这相当麻烦，但这是IE！ - patrickzdb

你应该将这个问题作为一个全新的问题来提出。包括一个链接到这里，但一定要有示例代码（在问题和jsFiddle中），以便其他人可以理解你的目标。我很困惑，如果不使用它的URL，你如何期望引用图像。 - KatieK

简而言之：不，你不能在IE中像在正常浏览器中那样对HTML图像应用SVG滤镜。 - Spongman

Answer 2

内联SVG可在IE 10和11以及Edge 12中使用。

我创建了一个名为gray的项目，其中包括这些浏览器的polyfill。该polyfill将<img>标签替换为内联SVG：https://github.com/karlhorky/gray

要实现，简短版本是在GitHub链接处下载jQuery插件并在 jQuery 后面添加到您的body末尾：

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

那么每张带有 grayscale 类的图像都会以灰度方式显示。

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

如果您愿意，您也可以查看演示。

- Karl Horky

---

这确实是我找到的最好的灰度 JS 插件，我尝试了大约 5 个，做得很好！ - Karolis Ramanauskas

谢谢，很高兴能帮到你！ - Karl Horky

从2015年开始，非常感谢！这个插件真是救命稻草，我在过去的两天里横跨互联网寻找这种完美的解决方案。谢谢！ - Singular1ty

你真是个救命恩人。完美地运行了。非常感谢你。 - Aditya

没问题，很高兴我能帮忙！ - Karl Horky

Karlhorky先生，您好。我尝试了所有方法，但在IE 10、11中都没有起作用。我已经为顶部横幅做了一切，但它不是灰度图像，甚至图片也没有显示出来。我在浏览器检查中看到了SVG标签，但没有图片。请帮我看看，谢谢！ - Vaibhav

Answer 3

使用这个jQuery插件https://gianlucaguarini.github.io/jQuery.BlackAndWhite/，这似乎是唯一的跨浏览器解决方案。此外，它具有漂亮的淡入和淡出效果。

$('.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
    }
});

- Powerriegel

---

必须附带使用说明、对链接资源如何适用于问题的具体解释以及一些示例代码，才能链接到工具或库。(//meta.stackoverflow.com/a/251605/584192) - Samuel Liew