将背景应用于<html>和/或<body>
http://jsfiddle.net/julien_c/GmAL4/
我发现如果将CSS背景应用于body ，它会占用整个页面（不pipe实际的身高或宽度是多less）。
但是，如果将CSS背景应用于html和body ，则body的背景不会占用整个页面 。
这是不符合预期的行为？
我将如何去叠加两个全屏幕背景（例如，背景色和半透明图像？）
这是正确的行为 。 1的 body并不立即占据视口的整个高度，尽pipe当你只对后者应用背景时看起来如此。 实际上，如果你不给它自己的背景，那么html元素将采用body的背景，并且html将把它传递给viewport：
根元素的背景成为canvas的背景，并且其背景绘画区域延伸以覆盖整个canvas，但是任何图像相对于根元素被定大小和定位，就好像它们被单独绘制为该元素一样。 （换句话说，背景定位区域是根元素确定的。）如果根的“背景颜色”值是“透明”，则canvas的背景颜色是UA相关的。 根元素不会再次绘制该背景，即其背景的使用值是透明的。
对于其根元素为HTML
HTML元素或XHTMLhtml元素的文档：如果根元素上的“background-image”的计算值为“none”且其“background-color”为“transparent”，则用户代理必须改为从该元素的第一个HTMLBODY或XHTMLbody子元素传播计算出的背景属性值。 该BODY元素的背景属性的使用值是它们的初始值，传播的值被视为在根元素上指定的值。 build议HTML文档的作者指定BODY元素的canvas背景，而不是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; }顺便说一句，你必须分别指定
html和bodyheight和min-height的原因是因为这两个元素都没有任何内在的高度。 两者都是height: auto默认为height: auto。 视点的高度为100％，所以height: 100%从视口中取height: 100%，然后作为最小值应用于body，以允许滚动内容。 -
在CSS3中，语法已经被扩展，所以你可以在一个属性中声明多个背景值，不需要将背景应用到多个元素（或调整
height/min-height）：body { background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat; }唯一需要注意的是，在单一的多层背景下，只有最底层可能有背景色。 在这个例子中你可以看到上层的
transparent值缺失。不要担心，即使使用多层背景，上面指定的传播背景值的行为也完全相同。
但是，如果您需要支持较旧的浏览器，则需要使用CSS2方法，该方法一直支持IE7。
我在这个其他答案下的评论解释，与一个伴随的小提琴 ， body实际上是偏离了默认的边距的html ，即使它看起来像被填补出来，而这又是由于这个看似奇怪的现象。
1 这可能起源于设置body的HTML background和bgcolor属性，导致background属性应用于整个视口。 更多在这里 。
