Bagaimanakah saya boleh melaraskan kecerahan warna secara dinamik mengikut peratusan dalam CSS?

Pelarasan Warna Dinamik dengan Peratusan CSS

Melaraskan kecerahan atau kecerahan warna mengikut peratusan ialah tugas biasa dalam penyesuaian dan pemperibadian CSS. Dalam penyemak imbas moden, ini boleh dicapai dengan berkesan menggunakan penapis CSS.

Pengurangan Warna CSS Mengikut Peratusan

Coretan kod CSS yang disediakan cuba mengurangkan kecerahan warna dengan menetapkan peratusan negatif kepada sifat warna atau warna biru. Walau bagaimanapun, CSS tidak menyokong operasi sedemikian. Sebaliknya, penapis CSS boleh digunakan untuk mengubah suai kecerahan warna secara dinamik.

Melaraskan Kecerahan Warna dengan Penapis

Sifat penapis CSS membolehkan anda menggunakan transformasi yang dipratentukan pada elemen, termasuk manipulasi warna. Untuk mengurangkan warna dengan peratusan, anda boleh menggunakan penapis kecerahan(). Kod berikut menunjukkan cara untuk menggelapkan warna elemen "butang" sebanyak 15%:

.button {
  color: #ff0000;
}

.button:hover {
  filter: brightness(85%);
}

Dalam contoh ini, penapis kecerahan() digunakan pada elemen butang pada tuding. Nilai 85% mengurangkan kecerahan warna, menjadikannya lebih gelap. Ambil perhatian bahawa 100% mewakili kecerahan garis dasar, dan nilai di bawah 100% menghasilkan warna yang lebih gelap, manakala nilai di atas 100% menghasilkan warna yang lebih terang.

Dengan menggunakan kaedah ini, anda boleh melaraskan warna unsur secara dinamik dengan menentukan peratusan , memberikan anda kawalan yang lebih besar ke atas pemperibadian dan penyesuaian warna dalam aplikasi web anda.

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