Bagaimanakah Saya Boleh Menukar Imej Warna kepada Skala Kelabu Hanya Menggunakan HTML dan CSS?

Menukar Imej kepada Skala Kelabu Menggunakan HTML/CSS

Soalan ini bertujuan untuk meneroka kaedah yang mudah untuk memaparkan imej peta bit warna dalam skala kelabu semata-mata melalui HTML dan CSS. Matlamatnya adalah untuk mengelakkan kerumitan penggunaan SVG atau Canvas dan mencari penyelesaian yang serasi dengan Firefox 3 dan Safari 3 atau lebih baru.

Nasib baik, kemunculan penapis CSS dalam Webkit telah menyediakan penyelesaian merentas penyemak imbas untuk tugasan ini. Coretan kod berikut menggambarkan cara untuk mencapai kesan skala kelabu yang diingini:

<img src="image.png">

Sifat penapis disokong oleh Internet Explorer 6-9 dan Microsoft Edge, manakala sifat -webkit-filter disokong oleh Google Chrome, Safari 6 , dan Opera 15 .

Untuk melumpuhkan kesan skala kelabu pada tuding, peraturan CSS berikut boleh digunakan:

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

Penyelesaian mudah ini membolehkan penukaran imej berwarna kepada skala kelabu dalam HTML/CSS, tanpa memerlukan overhed tambahan SVG atau Kanvas.

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