Bolehkah saya Menukar Imej kepada Skala Kelabu Hanya Menggunakan HTML dan CSS?

Menukar Imej kepada Skala Kelabu dengan HTML/CSS

Soalan:

Adakah ada yang mudah kaedah untuk memaparkan peta bit warna dalam skala kelabu menggunakan HTML/CSS semata-mata, tanpa memerlukan kerumitan SVG atau Canvas?

Jawapan:

Dengan kemunculan penapis CSS dalam Webkit, penyelesaian merentas penyemak imbas telah muncul. Di bawah ialah kod yang membolehkan transformasi skala kelabu:

img {
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+, Opera 15+ */
  filter: grayscale(1); /* Microsoft Edge, Firefox 35+ */
}

/* Disable grayscale on hover */
img:hover {
  -webkit-filter: grayscale(0);
  filter: none;
}

Untuk menggambarkan, berikut ialah contoh kod HTML:

<img  src="/static/imghwm/default1.png" data-src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/Wikimedia_Canadian_Community_Logo.svg/240px-Wikimedia_Canadian_Community_Logo.svg.png" class="lazy" alt="Bolehkah saya Menukar Imej kepada Skala Kelabu Hanya Menggunakan HTML dan CSS?" >

Menggunakan teknik ini pada imej akan menukarnya kepada skala kelabu, memberikan penyelesaian yang mudah dan berkesan untuk paparan imej monokromatik.

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