Bagaimanakah Saya Boleh Menggelapkan Latar Belakang Elemen pada Hover Tanpa Mencari Kod Hex Baharu?

Meningkatkan Warna Latar Belakang Elemen dengan CSS: Pendekatan Lebih Ringkas

Apabila ingin menggelapkan sedikit warna latar belakang elemen pada tuding, pembangun sering menggunakan bersusah payah mencari kod hex gelap yang selaras dengan warna asal. Walau bagaimanapun, penyelesaian yang lebih pantas muncul daripada keupayaan CSS untuk menggunakan tindanan lut sinar.

Dengan menggabungkan lapisan gelap separa lutsinar di atas latar belakang sedia ada, anda boleh mencapai kesan gelap yang diingini dengan mudah. Kaedah ini membolehkan anda mengekalkan warna asal teks sambil mengalihkan rupa latar belakang dengan lancar.

Contoh Kod

Untuk menggambarkan teknik ini, pertimbangkan kod CSS berikut:

.button {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  font-size: 20px;
  background-color: red;
}

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

Dalam coretan ini, keadaan tuding butang menampilkan kecerunan linear yang menggantikan warna latar belakang dengan 40% lapisan hitam legap. Hasilnya ialah kesan latar belakang yang menarik dan lebih gelap yang menyesuaikan dengan lancar kepada warna latar belakang yang berbeza.

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggelapkan Latar Belakang Elemen pada Hover Tanpa Mencari Kod Hex Baharu?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!