如何在 Internet Explorer 10 中对图像应用灰度滤镜？

Internet Explorer 10 中的灰度过滤器

CSS 过滤器（包括灰度）已广泛用于增强 Web 开发中的图像。然而，随着技术的进步，不同的浏览器以不同的方式实现过滤器，从而导致兼容性问题。

在 Internet Explorer 版本 9 及更低版本中，使用 DX 过滤器通过 CSS 应用灰度过滤器非常简单。不过，这种方法在 Internet Explorer 10 中不再适用。

Internet Explorer 10 的解决方案

Internet Explorer 10 引入了 SVG 滤镜效果，提供了实现灰度转换的替代方法。以下是如何使用 SVG 叠加应用灰度滤镜：

<code class="css">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");
}</code>

当用户将鼠标悬停在图像上时，上述 CSS 代码会将图像转换为灰度。 filter 属性使用 SVG 图像作为叠加层，其中包含将图像的颜色转换为灰度的滤镜效果。

更多信息

有关 Internet Explorer 10 中 SVG 滤镜效果的更多信息，请参考以下资源：

• [Internet Explorer 10 中的 SVG 滤镜效果](http://blogs.msdn.com/b/ie/archive/2011/10/14/svg- filter-effects-in-ie10.aspx)
• [使用 CSS 的跨浏览器图像灰度](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with- css.html)
• [简化的 JSFiddle](http://jsfiddle.net/KatieK/qhU7d/2/)

以上是如何在 Internet Explorer 10 中对图像应用灰度滤镜？的详细内容。更多信息请关注PHP中文网其他相关文章！