Bagaimanakah Latar Belakang HTML dan Elemen Badan Berinteraksi dalam CSS, dan Bagaimana Saya Boleh Mencapai Latar Belakang Skrin Penuh?

Memohon Latar Belakang pada Halaman

Apabila bekerja dengan HTML dan CSS, menggunakan latar belakang pada halaman boleh membawa kepada hasil yang tidak dijangka. Secara lalai, latar belakang yang digunakan pada elemen badan akan meluas hingga meliputi keseluruhan halaman, tanpa mengira saiz sebenar kandungan kandungan. Walau bagaimanapun, tingkah laku ini berubah apabila latar belakang turut digunakan pada elemen HTML.

Gelagat Yang Dijangka

Dalam mod standard, kedua-dua elemen HTML dan badan pada mulanya tidak mengambil ke atas keseluruhan ketinggian tempat pandang. Jika tiada latar belakang digunakan pada elemen HTML, ia akan mewarisi latar belakang daripada badan. Walau bagaimanapun, sebaik sahaja latar belakang digunakan pada elemen HTML, mekanisme ini rosak dan latar belakang untuk kedua-dua elemen akan menghormati kawasan yang ditentukan.

Menggabungkan Latar Belakang

Kepada letakkan dua latar belakang skrin penuh (cth., warna latar belakang dan imej separa lutsinar), anda boleh menggunakan sama ada badan atau elemen HTML sebagai satu bekas.

Pendekatan Elemen Tunggal:

Gunakan sifat trengkas latar belakang untuk menggabungkan warna latar belakang dan imej latar belakang dalam satu elemen:

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

Pendekatan Pelbagai Elemen (CSS2):

1. Tetapkan imej latar belakang kepada elemen HTML.
2. Tetapkan imej latar belakang lutsinar kepada elemen badan dengan ketinggian dan ketinggian min yang dikehendaki untuk ditutup port pandangan.

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

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

Pendekatan Pelbagai Elemen (CSS3):

Isytiharkan berbilang nilai latar belakang sebagai satu sifat dalam satu elemen:

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

Sokongan Penyemak Imbas

Latar belakang mekanisme penyebaran terpakai kepada kedua-dua pendekatan elemen tunggal dan berbilang. Walau bagaimanapun, untuk keserasian penyemak imbas yang lebih lama, adalah disyorkan untuk menggunakan kaedah CSS2, yang disokong kembali ke IE7.

Atas ialah kandungan terperinci Bagaimanakah Latar Belakang HTML dan Elemen Badan Berinteraksi dalam CSS, dan Bagaimana Saya Boleh Mencapai Latar Belakang Skrin Penuh?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!