internet explorer 10 - 如何应用灰度过滤器？

Posted 2023-03-04

技术标签:

【中文标题】internet explorer 10 - 如何应用灰度过滤器？【英文标题】：internet explorer 10 - how to apply grayscale filter? 【发布时间】：2013-01-26 14:43:52 【问题描述】：

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

【问题讨论】：

【参考方案1】：

使用这个 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
    
);

【讨论】：

链接到工具或库must be accompanied by usage notes, a specific explanation of how the linked resource is applicable to the problem, and some sample code。【参考方案2】：

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

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

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

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

那么每个类grayscale的图像都会显示为灰色。

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

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

【讨论】：

这确实是我遇到的最好的灰度 JS 插件，我尝试了大约 5 个，干得好！干杯，很高兴它有帮助！从 2015 年一路走来，谢谢！这个插件是一个救生员，过去两天我一直在互联网上寻找这种类型的解决方案。 谢谢！ 你是一个救生员。工作完美。非常感谢。没问题，很高兴能帮上忙！【参考方案3】：

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

【讨论】：

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

中的 CSS ......

您应该将此作为一个全新的问题提出。包括指向此处的链接，但请确保有示例代码（在 Q 和 jsFiddle 中），以便有人可以理解您的目标。我很困惑你希望如何在不使用它的 URL 的情况下引用图像。简而言之：不，在 IE 中，您不能将 SVG 过滤器应用于 HTML 图像，就像在正常浏览器中一样。