Bagaimanakah Saya Boleh Melapisi Warna Lutsinar Pada Imej Latar Belakang Menggunakan CSS?

Lapisan Warna Lutsinar di atas Imej Latar Belakang

Anda menyebut menghadapi masalah semasa cuba menindih lapisan warna lut sinar pada imej latar belakang menggunakan CSS. Mari kita terokai cara untuk mencapai kesan ini dengan berkesan.

Pendekatan awal anda menggunakan kedua-dua imej latar belakang dan warna latar belakang adalah betul secara teknikal tetapi tidak menghasilkan hasil yang diingini kerana sifat warna latar belakang mengatasi imej latar belakang. Untuk menyelesaikan masalah ini, anda boleh mempertimbangkan alternatif berikut:

background-image: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);
background-blend-mode: overlay;

Sifat background-blend-mod membolehkan anda menentukan cara berbilang lapisan latar belakang berinteraksi. Dalam kes ini, mod campuran tindanan menindih warna lut sinar pada imej latar belakang, mewujudkan lapisan separa lutsinar.

Pendekatan lain yang bergantung sepenuhnya pada CSS ialah menggunakan sifat bayang-kotak:

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

Dengan menentukan bayang kotak dalam yang telus, anda boleh mencipta lapisan berwarna yang menindih imej latar belakang dengan berkesan. Teknik ini mempunyai kelebihan sebagai penyelesaian CSS tulen, tanpa memerlukan sebarang elemen HTML tambahan.

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