Bagaimanakah Saya Boleh Mencipta Imej Latar Belakang Lutsinar dengan CSS?

Menindih Imej Lutsinar untuk Latar Belakang

Dalam reka bentuk web, menambahkan imej sebagai latar belakang meningkatkan daya tarikan estetik. Walau bagaimanapun, kadangkala imej mungkin terlalu terang atau memerlukan pelarasan ketelusan. Bolehkah anda menggabungkan imej latar belakang dan kelegapan dalam satu sifat CSS?

Walaupun rujukan yang menerangkan ketelusan imej dan tetapan imej latar belakang secara berasingan, adalah mungkin untuk menggabungkannya untuk mencipta imej latar belakang yang telus.

Pertimbangkan contoh berikut:

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

Kod ini menetapkan imej pada URL yang ditentukan sebagai latar belakang untuk elemen dengan ID "utama." Walau bagaimanapun, ini tidak membenarkan pelarasan kelegapan.

Untuk mencapai imej latar belakang yang telus, 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 kod ini:

1. kedudukan: relatif ditambahkan pada elemen induk (#utama) untuk membenarkan kedudukan mutlak yang berikut unsur pseudo.
2. elemen pseudo (#utama:selepas) dicipta untuk menindan imej latar belakang.
3. Harta kandungan ditetapkan kepada rentetan kosong untuk menghalang sebarang teks atau kandungan daripada muncul di dalam unsur pseudo.
4. elemen pseudo diberikan kedudukan mutlak dengan kedudukan: mutlak, membenarkan ia tindih elemen induk.
5. Sifat imej latar belakang ditetapkan kepada URL yang sama dengan imej latar belakang elemen #utama, mengakibatkan imej menindan elemen induk.
6. kelegapan : 0.2 menetapkan tahap ketelusan kepada 20%. Melaraskan nilai ini mengubah kelegapan imej.
7. z-index: -1 memastikan pseudo-element diletakkan di belakang kandungan elemen induk.

Menggunakan kaedah ini, anda boleh menetapkan imej latar belakang dan mengawal kelegapannya, membolehkan anda mencipta reka bentuk yang menarik secara visual dengan imejan telus yang tidak mengatasi kandungan.

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