Bagaimanakah Saya Boleh Melapisi Warna pada Imej Latar Belakang Hanya Menggunakan CSS?

Menindih Imej dengan Warna Menggunakan CSS

Mencari kaedah untuk meningkatkan visual tapak web anda dengan menindih warna pada imej latar belakang tanpa menggunakan tambahan unsur? CSS menyediakan penyelesaian elegan yang menghapuskan keperluan untuk DIV tambahan atau kesan tuding.

Menggunakan Gradien untuk Tindanan

Satu pendekatan melibatkan penggunaan berbilang latar belakang. Sebagai contoh, anda boleh mencipta kecerunan lut sinar pada imej anda:

html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)),
    url(image.jpg);
  background-size: cover;
}

Menggunakan Bayang-bayang Inset

Sebagai alternatif, anda boleh mencipta bayang-bayang inset yang besar:

.overlay {
  inset: 0;
  box-shadow: inset 0 0 9999px 100% rgba(0, 0, 0, 0.8);
}

Masukkan blok CSS ini dalam elemen induk latar belakang imej.

Kedua-dua teknik ini mencapai kesan yang diingini, membolehkan anda menambah tindanan satu warna pada imej latar belakang anda menggunakan CSS semata-mata.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Melapisi Warna pada Imej Latar Belakang Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!