Bolehkah Harta CSS Tunggal Menetapkan Kedua-dua Imej Latar Belakang dan Kelegapan?

Menetapkan Imej Latar Belakang dan Kelegapan dalam Harta Tunggal

Soalan:

Bolehkah saya menetapkan imej latar belakang lutsinar menggunakan harta CSS tunggal? Jika ya, bagaimana?

Isu Imej Asal:

Imej yang disediakan ("tandem.jpg") terlalu terang, jadi anda ingin mengurangkan kelegapannya kepada sekitar 0.2 sambil mengekalkan penggunaannya sebagai latar belakang imej.

Penyelesaian:

Walaupun tiada sifat CSS langsung yang membolehkan anda menetapkan kedua-dua imej latar belakang dan kelegapan secara serentak, anda boleh mencapai hasil yang diingini menggunakan yang berikut teknik:

#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:

• Buat elemen baharu (#utama:selepas) sebagai anak kepada elemen utama (#utama). Elemen ini akan digunakan untuk menindih imej latar belakang.
• Tetapkan kedudukannya kepada mutlak supaya ia boleh diletakkan secara relatif kepada elemen induknya.
• Gunakan sifat kandungan untuk menetapkan rentetan kosong, menjadikan elemen ini tidak kelihatan dengan berkesan tetapi membenarkannya memegang gaya latar belakang.
• Tetapkan kelegapannya kepada 0.2 untuk mencapai tahap ketelusan yang diingini untuk imej latar belakang.
• Tetapkan indeks znya kepada -1 untuk memastikan ia muncul di belakang kandungan elemen utama.

Teknik ini dengan berkesan mencipta lapisan lutsinar di atas elemen utama, mempamerkan imej latar belakang dengan kelegapan yang ditentukan.

Atas ialah kandungan terperinci Bolehkah Harta CSS Tunggal Menetapkan Kedua-dua Imej Latar Belakang dan Kelegapan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!