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