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

在 Internet Explorer 10 中应用灰度滤镜：详细指南

Internet Explorer 10 为将灰度滤镜应用于图像提出了独特的挑战。与以前版本的 IE 不同，IE10 缺乏对 DX 滤镜和前缀灰度滤镜的支持。不过，有一种解决方法可以利用 SVG 叠加来达到所需的效果。

解决方案：SVG 叠加

要在 Internet Explorer 10 中应用灰度滤镜，您可以使用以下 CSS：

<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>

在此代码中，悬停状态用于在鼠标悬停时启用过滤器。 filter 属性指向包含 feColorMatrix 元素的 SVG 覆盖层，该元素指定灰度转换。

使用示例：

<code class="html"><svg>
    <image href="image.jpg" class="grayscale" />
</svg></code>

浏览器支持：

Internet Explorer 10 及更高版本支持 SVG 叠加方法。

其他资源：

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

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