Bagaimana Mudah Menggelapkan Latar Belakang Elemen dengan CSS?

Menjadikan Elemen Lebih Gelap dengan CSS: Trik Mudah

Kaedah semasa untuk menggelapkan latar belakang elemen menggunakan CSS boleh membosankan, memerlukan penciptaan manual kod hex warna yang lebih gelap. Artikel ini membentangkan alternatif mudah yang memanfaatkan imej latar belakang untuk mencapai kesan penggelapan yang diingini dengan elegan.

Masalahnya: Gelap Manual yang Membosankan

Apabila menuding pada butang, ia adalah perkara biasa untuk menggelapkan warna latar belakang untuk meningkatkan interaktiviti pengguna. Sebelum ini, ini dicapai dengan menentukan kod heks yang lebih gelap dalam CSS, seperti ditunjukkan di bawah:

.Button:hover {
  background-color: #ALittleDarkerHex;
}

Walau bagaimanapun, mencari kod hex gelap yang sesuai boleh memakan masa dan tidak tepat.

Penyelesaian: Tindanan Imej Latar Belakang

Daripada mengubah suai sifat warna latar belakang, teknik ini memperkenalkan lapisan gelap di atas elemen menggunakan imej latar belakang dan kecerunan linear:

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

Tindanan gelap ini digunakan pada warna latar belakang sedia ada, menghasilkan kesan gelap yang halus tanpa mengubah warna teks. Kelegapan 40% membolehkan warna latar belakang asas kekal kelihatan sambil mengurangkan keamatannya.

Pelaksanaan dan Contoh

Untuk menunjukkan teknik ini, pertimbangkan HTML dan CSS berikut:

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

.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);
}

Butang akan memaparkan warna latar belakang asalnya dan apabila dituding di atas, kesan gelap yang halus akan digunakan, tanpa mengira warna latar belakang.

Atas ialah kandungan terperinci Bagaimana Mudah Menggelapkan Latar Belakang Elemen dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!