Bagaimana untuk Menggelapkan Warna Latar Belakang Elemen pada Hover Tanpa Menjejaskan Ketelusan?

Menggelapkan Warna Latar Belakang Elemen dengan CSS

Meningkatkan antara muka pengguna melibatkan menyerlahkan elemen interaktif, seperti butang, dengan mengubah penampilannya. Pendekatan biasa adalah untuk menggelapkan warna latar belakang apabila dituding.

Pada mulanya, seseorang mungkin cuba melaraskan kelegapan, tetapi ini menjejaskan kedua-dua warna dan ketelusan. Penyelesaian yang lebih disasarkan wujud.

Kaedah: Tindih Lapisan Gelap

Buat tindanan gelap menggunakan imej latar belakang. Kaedah ini mengekalkan warna teks asal sambil menggelapkan latar belakang.

Laksanakan lapisan tindanan dalam CSS:

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

Teknik ini secara automatik menggelapkan sebarang warna latar belakang, malah berbilang warna seperti yang dilihat dalam contoh :

<div class="button"> some text </div>
<div class="button">

Dengan memanfaatkan kaedah tindanan ini, pembangun boleh menggelapkan warna latar belakang elemen dengan mudah pada tuding, meningkatkan interaktiviti pengguna tanpa kerumitan mengira warna gelap secara manual.

Atas ialah kandungan terperinci Bagaimana untuk Menggelapkan Warna Latar Belakang Elemen pada Hover Tanpa Menjejaskan Ketelusan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!