Bagaimanakah Latar Belakang HTML `` dan `` Berbeza, dan Bagaimanakah Saya Boleh Menggunakan Pelbagai Latar Belakang Dengan Berkesan?

Memohon Latar Belakang pada dan/atau

Apabila menggunakan latar belakang pada atau elemen, seseorang mungkin melihat percanggahan dalam tingkah laku. Dengan latar belakang yang ditetapkan pada elemen, ia merangkumi keseluruhan halaman, manakala latar belakang elemen dihadkan kepada kawasan di mana kandungan dipaparkan.

Mengapa Percanggahan?

Dalam mod standard, dan elemen tidak semestinya memenuhi ketinggian viewport. Walau bagaimanapun, elemen akan menerima pakai warna latar belakang elemen jika tidak ditakrifkan dengan jelas. Selepas itu, latar belakang yang diwarisi ini menjadi latar belakang kanvas, meliputi keseluruhan port pandangan.

Melebihi Berbilang Latar Belakang

Untuk mencapai kesan latar belakang bertindih, menggabungkan dua sifat latar belakang dalam satu elemen (cth., ) disyorkan. Menggunakan sifat imej latar belakang dan warna latar belakang, atau sifat trengkas latar belakang, membolehkan penggabungan yang lancar.

Sebagai contoh, untuk menindih imej latar belakang lutsinar pada warna latar belakang pepejal, gunakan:

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

Menggunakan Pelbagai Latar Belakang

Untuk menggabungkan berbilang imej latar belakang, pertimbangkan perkara berikut kaedah:

CSS2:

Tetapkan imej latar belakang yang berbeza pada kedua-dua dan elemen, memastikan ketinggian elemen dan ketinggian minimum ditetapkan:

html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}

CSS3:

Gunakan sintaks berbilang latar belakang dalam satu sifat:

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

Atas ialah kandungan terperinci Bagaimanakah Latar Belakang HTML `` dan `` Berbeza, dan Bagaimanakah Saya Boleh Menggunakan Pelbagai Latar Belakang Dengan Berkesan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!