如何使用 IE10 實現跨瀏覽器影像灰階？

IE10 的跨瀏覽器影像灰階注意事項

Internet Explorer 9 及更早版本的瀏覽器透過DX 濾鏡支援度濾鏡。然而，由於缺乏 DX 濾鏡支持，IE10 帶來了獨特的挑戰。

IE10 灰階解決方案

要在 IE10 中實現所需的灰階效果，您可以使用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 的跨瀏覽器影像灰階](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)

以上是如何使用 IE10 實現跨瀏覽器影像灰階？的詳細內容。更多資訊請關注PHP中文網其他相關文章！