Bagaimanakah Saya Boleh Menukar Imej kepada Skala Kelabu Dengan Mudah Menggunakan Penapis CSS?

Tukar Imej kepada Skala Kelabu Menggunakan Penapis CSS

Dalam bidang pembangunan web, menukar imej kepada skala kelabu mungkin memberikan cabaran. Kaedah tradisional yang melibatkan SVG atau Canvas boleh memakan masa. Walau bagaimanapun, dengan kemunculan penapis CSS, penyelesaian yang lebih ringkas dan merentas penyemak imbas telah muncul.

Penapisan Skala Kelabu Penyemak Imbas Merentas

Penapis CSS menyediakan cara yang mudah untuk mengubah suai rupa unsur, termasuk imej. Penapis skala kelabu() membolehkan anda menukar imej kepada skala kelabu, meniru kesan mengalih keluar maklumat warna.

Untuk menggunakan kesan skala kelabu pada imej, gunakan sifat CSS berikut:

-webkit-filter: grayscale(1);
filter: grayscale(1);

Contoh Kod

Pertimbangkan HTML berikut kod:

<img  src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="Bagaimanakah Saya Boleh Menukar Imej kepada Skala Kelabu Dengan Mudah Menggunakan Penapis CSS?" >

Untuk memaparkan imej dalam skala kelabu, tambah gaya CSS:

img {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

Tuding Tuding

Untuk melumpuhkan kesan skala kelabu pada tuding, anda boleh menentukan nilai penapis yang berbeza:

img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Ini akan mengembalikan imej kepada warna asalnya apabila tetikus melayang di atasnya.

Keserasian Pelayar

Penapis CSS disokong dalam penyemak imbas moden, termasuk Webkit, Edge dan Firefox 35 . Walau bagaimanapun, sokongan untuk IE6-9 adalah terhad.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menukar Imej kepada Skala Kelabu Dengan Mudah Menggunakan Penapis CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!