Bagaimanakah Saya Boleh Menggunakan Penapis Skala Kelabu pada Imej dalam Internet Explorer 10?

Menggunakan Penapis Skala Kelabu dalam Internet Explorer 10: Panduan Terperinci

Internet Explorer 10 memberikan cabaran unik untuk menggunakan penapis skala kelabu pada imej. Tidak seperti versi IE sebelumnya, IE10 tidak mempunyai sokongan untuk penapis DX dan penapis skala kelabu awalan. Walau bagaimanapun, terdapat penyelesaian yang memanfaatkan tindanan SVG untuk mencapai kesan yang diingini.

Penyelesaian: Tindanan SVG

Untuk menggunakan penapis skala kelabu dalam Internet Explorer 10, anda boleh gunakan CSS berikut:

<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>

Dalam kod ini, keadaan tuding digunakan untuk mendayakan penapis pada tetikus. Sifat penapis menghala ke tindanan SVG yang mengandungi elemen feColorMatrix, yang menentukan penukaran skala kelabu.

Contoh Penggunaan:

<code class="html"><svg>
    <image href="image.jpg" class="grayscale" />
</svg></code>

Sokongan Penyemak Imbas:

Pendekatan tindanan SVG disokong dalam Internet Explorer 10 dan ke atas.

Sumber Tambahan:

• [Cross-Browser Skala Kelabu Imej dengan CSS](http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)
• [Kesan Penapis SVG dalam IE10](http: //blogs.msdn.com/b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx)

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