HTML lwn Latar Belakang Badan dalam CSS: Di Mana Harus Saya Gunakan Latar Belakang Skrin Penuh Saya?

Latar Belakang CSS pada vs : A Tale of Two Viewports

Apabila menggunakan latar belakang CSS sama ada pada atau unsur, perbezaan yang halus lagi ketara timbul. Latar belakang yang diberikan kepada menjangkau seluruh halaman, tanpa mengira saiz sebenar badan. Sebaliknya, apabila digunakan pada kedua-dua dan , latar belakang untuk kekal terhad kepada dimensi elemen.

Sebab Percanggahan

Tingkah laku ini berpunca daripada fakta bahawa tidak secara inheren mengambil keseluruhan ketinggian viewport dalam mod standard. Sebaliknya, latar belakangnya mewarisi daripada elemen jika dibiarkan tidak dinyatakan, memanjangkannya ke seluruh kanvas.

Mengungguli Latar Belakang Skrin Penuh

Sekarang, jika anda berhasrat untuk menggabungkan dua latar belakang skrin penuh, sama ada warna latar belakang dan tindanan imej, di sini adakah pilihan anda:

Menggabungkan Latar Belakang pada Tunggal Elemen

Menggunakan Shorthand Latar Belakang:

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

Menggabungkan Latar Belakang pada Pelbagai Elemen

Pendekatan CSS2:

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

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

CSS3 Pendekatan:

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

Pertimbangan

• Dalam CSS3, hanya lapisan bawah latar belakang berbilang lapisan boleh mempunyai warna latar belakang.
• The tingkah laku tercatat terpakai walaupun dengan latar belakang berbilang lapisan.
• Untuk keserasian penyemak imbas yang lebih lama, pertimbangkan untuk menggunakan CSS2 pendekatan.

Ingat, tingkah laku ini berpunca daripada amalan HTML terdahulu yang menetapkan atribut latar belakang HTML pada , menyebabkan latar belakang meluas ke atas port pandangan.

Atas ialah kandungan terperinci HTML lwn Latar Belakang Badan dalam CSS: Di Mana Harus Saya Gunakan Latar Belakang Skrin Penuh Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!