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

Mary-Kate Olsen

發布： 2024-10-28 13:33:30

原創

871 人瀏覽過

How Can You Achieve Cross-Browser Image Grayscale with IE10 Considerations?

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

來源：php.cn

上一篇：如何使用 CSS 建立背景模糊效果，即使在較舊的瀏覽器中也是如此？下一篇：如何使用 jQuery 建立響應式頁面滑動動畫？

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章