如何在 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中文網其他相關文章！