如何在 Internet Explorer 10 中套用灰階濾鏡？

在Internet Explorer 10 中應用灰階濾鏡

Internet Explorer 10 對使用傳統CSS 方法應用灰階濾鏡提出了挑戰。與先前版本的 IE 不同，不再支援 DX 濾鏡和前綴灰階濾鏡。

解決方案：SVG 疊加

要在 IE10 中對影像進行灰度化，您可以使用 SVG覆蓋。這涉及使用帶有將影像轉換為灰階的矩陣的 SVG 濾鏡。

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>

其他注意事項：

• 當影像有純色背景時，影像具有純色背景時，影像具有純色背景時，影像具有純色背景時，影像具有純色背景SVG 疊加技術效果最佳。
• 有關IE10 中SVG 濾鏡效果的更多信息，請參閱：http://blogs.msdn.com /b/ie/archive/2011/10/14/svg-filter-effects-in -ie10.aspx

範例：

<code class="css">svg {
    background:url(http://4.bp.blogspot.com/-IzPWLqY4gJ0/T01CPzNb1KI/AAAAAAAACgA/_8uyj68QhFE/s400/a2cf7051-5952-4b39-aca3-4481976cb242.jpg);
}</code>

以上是如何在 Internet Explorer 10 中套用灰階濾鏡？的詳細內容。更多資訊請關注PHP中文網其他相關文章！