Bagaimanakah Saya Boleh Mencerahkan atau Menggelapkan Warna Secara Dinamik Menggunakan CSS?

Mencerahkan atau Menggelapkan Warna Secara Dinamik Menggunakan Peratusan CSS

Dalam pembangunan web, menyesuaikan antara muka pengguna dengan warna adalah penting. Kadangkala, anda mungkin perlu melaraskan warna elemen secara dinamik berdasarkan keutamaan pengguna atau keadaan tertentu. Walau bagaimanapun, kod heks statik boleh mengehadkan jika pengguna mahukan skema warna yang disesuaikan.

Menggunakan Penapis CSS

Pelayar moden menawarkan penyelesaian menggunakan penapis CSS. Dengan penapis ini, anda boleh mengubah suai warna elemen dengan melaraskan peratusan kecerahannya. Ini membolehkan anda mencerahkan atau menggelapkan warna tanpa menukar warnanya.

Untuk menggunakan penapis kecerahan, gunakan sintaks berikut:

filter: brightness(percentage);

Contohnya, untuk mencerahkan warna sebanyak 50% , anda akan menggunakan:

filter: brightness(50%);

Untuk menggelapkan warna sebanyak 15%, gunakan:

filter: brightness(85%);

Berikut ialah contoh untuk menunjukkan kesan:

.button {
  color: #ff0000;
}

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

<button class="button">Foo lorem ipsum</button>

Dalam contoh ini, kelas "butang" mengandungi warna merah. Apabila butang dituding di atas, kelas "button:hover" menggunakan penapis kecerahan 85%, menggelapkan sedikit warna merah.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencerahkan atau Menggelapkan Warna Secara Dinamik Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!