Bagaimanakah Saya Menindih Latar Belakang dengan Berkesan pada Elemen `` dan `` HTML?

Memohon Latar Belakang pada dan

Dalam reka letak HTML, menggunakan latar belakang pada kedua-dua dan elemen boleh membuahkan hasil yang tidak dijangka. Artikel ini mengkaji tingkah laku yang dijangkakan dan menyediakan penyelesaian untuk menindih berbilang latar belakang.

Penyebaran Latar Belakang dalam Mod Standard:

Dalam mod standard, tidak secara automatik mengambil ketinggian port pandangan, walaupun ia mungkin kelihatan berbuat demikian dengan latar belakang. Jika tiada latar belakang ditetapkan untuk , ia mewarisi latar belakang daripada . Walau bagaimanapun, jika anda nyatakan latar belakang untuk secara eksplisit, latar belakang itu meluas hingga meliputi keseluruhan kanvas, termasuk .

Peningkatan Elemen Tunggal:

Untuk menindih dua imej latar belakang pada warna latar belakang pada satu elemen, seperti atau , anda boleh menggunakan sifat latar belakang atau warna latar belakang. Contohnya:

body {
    background: #ddd url(background.png) center top no-repeat;
}

Melebihi Imej Latar Belakang pada Berbilang Elemen:

Untuk menggabungkan berbilang imej latar belakang menggunakan berbilang elemen, anda boleh menggunakan tetapan latar belakang yang berbeza pada . Sebagai contoh, tetapkan imej latar belakang kepada dan satu lagi kepada yang bertujuan untuk menindihnya. Pastikan dan bersaiz betul untuk ketinggian skrin penuh.

Latar Belakang Berbilang Lapis dalam CSS3:

Dalam CSS3, anda boleh mengisytiharkan berbilang nilai latar belakang dalam satu sifat, menghapuskan memerlukan pelbagai elemen. Contohnya:

body {
    background: url(background2.png) center top no-repeat, 
                #ddd url(background1.png) repeat;
}

Perhatikan bahawa hanya lapisan paling bawah dalam latar belakang berbilang lapisan boleh mempunyai warna latar belakang.

Sokongan untuk Penyemak Imbas Lama:

Untuk penyemak imbas yang lebih lama daripada CSS3, anda mesti menggunakan kaedah berbilang elemen untuk menindih latar belakang. Pastikan dan mempunyai ketinggian dan jidar yang betul.

Atas ialah kandungan terperinci Bagaimanakah Saya Menindih Latar Belakang dengan Berkesan pada Elemen `` dan `` HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!