Bagaimana untuk Memohon Penapis Skala Kelabu dalam Internet Explorer 10?

Menggunakan Penapis Skala Kelabu dalam Internet Explorer 10

Internet Explorer 10 memberikan cabaran untuk menggunakan penapis skala kelabu menggunakan kaedah CSS tradisional. Tidak seperti versi IE sebelumnya, penapis DX dan penapis skala kelabu awalan tidak lagi disokong.

Penyelesaian: Tindanan SVG

Untuk imej skala kelabu dalam IE10, anda boleh menggunakan SVG tindanan. Ini melibatkan penggunaan penapis SVG dengan matriks yang menukar imej kepada skala kelabu.

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

Pertimbangan Tambahan:

• Teknik tindanan SVG berfungsi paling baik apabila imej mempunyai latar belakang yang kukuh.
• Untuk mendapatkan maklumat lanjut tentang kesan penapis SVG dalam IE10, rujuk kepada: http://blogs.msdn.com /b/ie/archive/2011/10/14/svg-filter-effects-in-ie10.aspx

Contoh:

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

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