Bagaimanakah saya boleh melaraskan kecerahan warna secara dinamik menggunakan CSS?

Manipulasi Warna Dinamik dengan Penapis CSS

Soalan:

Bagaimana kita boleh meringankan atau menggelapkan warna tertentu menggunakan CSS? Bolehkah kita mengurangkan warna dengan peratusan?

Jawapan:

Ya, mengurangkan warna dengan peratusan boleh dilakukan menggunakan penapis CSS. Begini caranya:

.button {
  color: #ff0000;
}

/* note: 100% is baseline so 85% is slightly darker, 
   20% would be significantly darker */
.button:hover {
  filter: brightness(85%);
}

Dalam contoh ini, warna asas ditetapkan sebagai merah (#ff0000) untuk butang. Dengan menggunakan penapis pada butang pada tuding, kecerahan dikurangkan sebanyak 15%, menghasilkan warna merah yang lebih gelap. Peratusan boleh dilaraskan untuk mencapai tahap kecerahan atau kegelapan yang diingini.

Pendekatan ini serasi dengan semua penyemak imbas moden, seperti yang terbukti daripada ketersediaannya yang meluas dalam jadual keserasian caniuse.

Atas ialah kandungan terperinci Bagaimanakah saya boleh melaraskan kecerahan warna secara dinamik menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!