37

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

4

3 回答 3

35

IE10 不像IE9 和更早版本那样支持 DX 滤镜，也不支持灰度滤镜的前缀版本。

但是，您可以在 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-11T18:59:57.610 回答
23

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

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

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

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

然后每个具有该类的图像grayscale都将显示为灰色。

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

如果你愿意，你也可以看一个演示。

于 2014-02-12T22:28:00.393 回答
5

使用这个 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
    }
});
于 2013-11-23T20:31:33.510 回答