Bagaimana untuk Memohon Penapis Skala Kelabu pada Imej dalam Internet Explorer 10?

Penapis Skala Kelabu dalam Internet Explorer 10

Penapis CSS, termasuk skala kelabu, telah digunakan secara meluas untuk meningkatkan imej dalam pembangunan web. Walau bagaimanapun, seiring dengan kemajuan teknologi, penyemak imbas yang berbeza melaksanakan penapis secara berbeza, yang membawa kepada isu keserasian.

Dalam Internet Explorer versi 9 dan ke bawah, menggunakan penapis skala kelabu melalui CSS adalah mudah menggunakan penapis DX. Walau bagaimanapun, pendekatan ini tidak lagi berfungsi dalam Internet Explorer 10.

Penyelesaian untuk Internet Explorer 10

Internet Explorer 10 memperkenalkan kesan penapis SVG, menyediakan kaedah alternatif untuk mencapai penukaran skala kelabu. Begini cara menggunakan penapis skala kelabu menggunakan tindanan 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>

Kod CSS di atas menukar imej kepada skala kelabu apabila pengguna menuding di atasnya. Sifat penapis menggunakan imej SVG sebagai tindanan, yang mengandungi kesan penapis yang menukar warna imej kepada skala kelabu.

Maklumat Lanjut

Untuk mendapatkan maklumat lanjut tentang kesan penapis SVG dalam Internet Explorer 10, sila rujuk sumber berikut:

• [Kesan Penapis SVG dalam Internet Explorer 10](http://blogs.msdn.com/b/ie/archive/2011/10/14/svg- filter-effects-in-ie10.aspx)
• [Cross-Browser Image Greyscale with CSS](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with- css.html)
• [JSFiddle Ringkas](http://jsfiddle.net/KatieK/qhU7d/2/)

Atas ialah kandungan terperinci Bagaimana untuk Memohon Penapis Skala Kelabu pada Imej dalam Internet Explorer 10?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!