http://jsfiddle.net/julien_c/GmAL4/

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

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

这是否是预期的行为？

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

评论

可能的重复与将CSS规则应用于html与正文相比有什么区别？

#1 楼

这是正确的行为。1在标准模式下，body和html不会立即占据视口的整个高度，即使它只是在将背景应用于视口时也是如此。实际上，如果您不提供自己的背景，则html元素将具有body的背景，而html会将其传递给画布：


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

对于根元素为HTML HTML元素或XHTML html元素的文档：根元素上的“背景图像”为“无”，其“背景颜色”为“透明”，用户代理必须改为传播该元素的第一个HTML BODY或XHTML body子元素的背景属性的计算值。该BODY元素的背景属性的使用值是它们的初始值，并且将传播的值视为在根元素上指定了它们。建议HTML文档的作者为BODY元素而不是HTML元素指定画布背景。


但是，您可以在背景颜色上叠加任何背景图像单个元素（html或body），而不必依赖两个元素-只需使用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以允许滚动内容。已扩展，因此您可以在单个属性中声明多个背景值，而无需将背景应用于多个元素（或调整height / min-height）：

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


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

不用担心，即使使用多层方法，上面指定的具有传播背景值的行为也完全相同。背景。


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

我在另一个答案下的评论（带有伴随的小提琴）解释了body实际上是如何从html默认偏移量偏移的，即使它看起来像是被填充了一样，也是由于这种看似奇怪的现象。


1这可能起源于设置background的HTML bgcolor和body属性，导致背景属性应用于整个视口。在这里了解更多。

评论

您可以提供与此相关的W3C规范参考，以便您的回答成为事实而不是猜测吗？

– Robert Koritnik
2012年6月8日在11:04
@Robert Koritnik：嘿，对此感到抱歉。快速的连续编辑是我的工作方式。现在应该更完整了。

– BoltClock♦
2012年6月8日在11:09
感谢您的参考。我没有得到你的最后一句话（叠加技巧）。您将如何叠加两个全屏背景？

– julien_c
2012年6月8日上午11:14
@julien_c：基本上，您将半透明的背景图像应用于正文，将背景颜色应用于html。我添加了一个示例片段。

– BoltClock♦
2012年6月8日在11:17
请注意，html相对于视口的行为与body相对于html的行为几乎相同，但背景转义超出了html元素的范围。请参阅jsfiddle.net/GmAL4/4以了解我的意思。

– Alohci
2012年6月8日在11:42


#2 楼

建议阅读以下内容：

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

本质上，如果background元素上没有html，则body background将覆盖该页面。如果background元素上存在html，则body background的行为与其他任何元素一样。