将背景应用到和/或

Question

我发现，如果将CSS背景应用于body，则它将占用整个页面（无论实际的高度或宽度body是多少）。

但是，如果您同时对html和都应用CSS背景body，则的背景body 不会占用整个页面 。

这是预期的行为吗？

我该如何叠加两个全屏背景（例如，背景色和半透明图像？）

Answer 1

这是正确的行为。1在标准模式下，body，以及html，不立即采取了视区的整个高度，即使它出现，所以当你只应用背景后者。实际上，如果您不为其提供自己的背景，则该html元素将具有body其背景，并将其html传递给画布：

根元素的背景成为画布的背景，并且其背景绘画区域扩展为覆盖整个画布，尽管任何图像的大小和位置都相对于根元素而定，就好像它们是为该元素单独绘制的一样。（换句话说，背景定位区域是针对根元素确定的。）如果根的“
background-color”值为“ transparent”，则画布的背景色取决于UA。根元素不会再次绘制该背景，即其背景的使用值是透明的。

对于其根元素是HTML HTML元素或XHTML html元素的文档：如果根元素上“ background-image”的计算值为“
none”且其“ background-color”为“ transparent”，则用户代理必须改为传播从该元素的第一个HTML
BODY或XHTML
body子元素计算背景属性的值。该BODY元素的背景属性的使用值是它们的初始值，并且将传播的值视为在根元素上指定了它们。建议HTML文档的作者为BODY元素而不是HTML元素指定画布背景。

也就是说，您可以将任何背景图像叠加到单个元素（html或body）上的背景颜色上，而不必依赖两个元素-
只需在shorthand属性中使用background-color和/ background-image或组合它们background：

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

如果要合并 两个背景图像 ，则需要依赖多个背景。主要有两天要执行此操作：

• 在CSS2中，这两种样式的样式都派上用场：只需将背景图像设置为，html并将另一个图像body叠加在第一个图像上即可。为了确保body显示器上的背景图像处于全视口高度，您还需要分别应用height和min-height：

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

  }

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

顺便说一句，你为什么要注明原因height，并min- height以html和body分别为，因为无论元素有什么内在的高度。两者都是height: auto默认设置。视口具有100％的高度，因此height: 100%是从视口中提取的，然后body最小化以允许滚动内容。

• 在CSS3中，语法得到了扩展，因此您可以在单个属性中声明多个背景值，而无需将背景应用于多个元素（或Adjust height/ min-height）：

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

  }

唯一需要注意的是，在单个多层背景中，只有最底层可以具有背景色。在此示例中，您可以看到transparent上层缺少该值。

不用担心-即使使用多层背景，上面指定的带有传播背景值的行为也完全一样。

但是，如果需要支持较旧的浏览器，则需要使用CSS2方法，该方法一直支持到IE7。

我在另一个答案下的评论解释了由于看起来看似奇怪的现象，尽管看起来好像正在被填充，但body实际上如何偏离html默认的页边距。

1这可能有其在设置HTML根background和bgcolor属性body造成的背景属性适用于整个视口。在这里更多。