HTML 與 CSS 中的正文背景：我應該在哪裡套用全螢幕背景？

上的CSS 背景vs ：兩個視口的故事

將CSS 背景套用到 時或元素，出現了微妙但顯著的差異。分配給

的背景是延伸到整個頁面，無論正文的實際大小如何。相反，當應用於 時，和，的背景仍然局限於元素的尺寸。

差異的原因

此行為源自於以下事實：

在標準模式下本身並不佔據整個視口高度。相反，它的背景繼承自 如果未指定元素，則將其擴展到整個畫布。

疊加全螢幕背景

現在，如果您打算組合兩個全螢幕背景，無論是背景顏色還是影像疊加，請在此處您的選擇是：

在單一元素上組合背景

使用背景速記：

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

組合多個元素的背景

CSS2方法：

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

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

CSS3做法：

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

注意事項

• 在CSS3中，只有多層背景的最底層可以有背景顏色。
• 即使在多層背景下，上述行為也適用。
• 為了相容於較舊的瀏覽器，請考慮使用CSS2

請記住，此行為源自早期的HTML 實踐，即在

上設定HTML 背景屬性，導致背景延伸到視口上。

以上是HTML 與 CSS 中的正文背景：我應該在哪裡套用全螢幕背景？的詳細內容。更多資訊請關注PHP中文網其他相關文章！