Bolehkah CSS Menggabungkan Imej Latar Belakang dan Kelegapan dalam Satu Harta?

Bolehkah Imej Latar Belakang dan Kelegapan Ditetapkan dalam Satu Harta?

CSS membolehkan anda menetapkan ketelusan latar belakang dan imej latar belakang secara berasingan, tetapi bagaimanakah caranya anda mencapai imej latar belakang yang telus?

Contoh Senario:

Pertimbangkan imej yang akan kelihatan hebat sebagai latar belakang jika digunakan pada kelegapan penuh. Anda ingin mengurangkan kelegapannya kepada sekitar 0.2 untuk kesan yang lebih halus.

Pendekatan Tradisional:

Menggunakan sifat imej latar belakang sahaja tidak akan melaraskan ketelusan imej .

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
}

Penyelesaian: Pseudo-Element Hack

Untuk mencipta imej latar belakang yang telus, gunakan elemen pseudo:

#main {
    position: relative;
}
#main:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

Penjelasan:

• The :selepas pseudo-element mencipta elemen baharu dalam #main div.
• Ia tidak mempunyai kandungan (kandungan: ""), jadi ia tidak kelihatan secara visual.
• Ia benar-benar diletakkan di bahagian atas kiri #utama dan meliputi seluruh kawasannya.
• Kelegapan berkurangan sebanyak 0.2 menjadikan imej latar belakang telus.
• Indeks z bagi -1 meletakkan imej di belakang kandungan dalam #utama.

Atas ialah kandungan terperinci Bolehkah CSS Menggabungkan Imej Latar Belakang dan Kelegapan dalam Satu Harta?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!