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中文网其他相关文章！