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

Linda Hamilton
Lepaskan: 2024-11-10 22:18:02
asal
565 orang telah melayarinya

How to Darken Element Background Colors on Hover Without Affecting Transparency?

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 */;
}
Salin selepas log masuk

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">
Salin selepas log masuk

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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan