Bagaimanakah Saya Boleh Mencipta Imej Latar Belakang Lutsinar dengan Kawalan Kelegapan dalam CSS?

Imej Latar Belakang Lutsinar dengan Kawalan Kelegapan

Dalam CSS, menetapkan imej latar belakang dan melaraskan kelegapannya adalah tugas yang berasingan. Walau bagaimanapun, adalah mungkin untuk menggabungkan kedua-dua ini untuk mencipta imej latar belakang yang telus.

Menetapkan Imej Latar Belakang dan Kelegapan

Untuk menetapkan imej latar belakang, gunakan sifat imej latar belakang dengan URL imej yang sah . Contohnya:

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

Untuk menentukan kelegapan imej latar belakang, gunakan sifat kelegapan. Nilai berjulat daripada 0 (lutsinar sepenuhnya) hingga 1 (legap sepenuhnya).

Walau bagaimanapun, penggunaan kelegapan secara langsung pada sifat imej latar belakang hanya mempengaruhi imej, bukan latar belakang itu sendiri. Untuk mencapai imej latar belakang yang telus, kita memerlukan langkah tambahan.

Mencipta Lapisan Latar Belakang Telus

Untuk mencipta lapisan telus di atas imej latar belakang, gunakan CSS berikut:

#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;
}

Dalam CSS ini:

• #utama:selepas mencipta elemen pseudo yang akan menjadi lutsinar lapisan.
• kedudukan: mutlak meletakkan lapisan di atas elemen utama.
• kelegapan: 0.2 menetapkan kelegapan lapisan kepada 20%.
• z-index: -1 memastikan bahawa lapisan berada di belakang kandungan elemen utama.

Dengan menggabungkan teknik CSS ini, anda boleh mencipta lutsinar imej latar belakang dengan kawalan kelegapan yang tepat.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Imej Latar Belakang Lutsinar dengan Kawalan Kelegapan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!