这是正确的行为。1在标准模式下，
body，以及
html，不立即采取了视区的整个高度，即使它出现，所以当你只应用背景后者。实际上，如果您不为其提供自己的背景，则该
html元素将具有
body其背景，并将其
html传递给画布：
根元素的背景成为画布的背景，并且其背景绘画区域扩展为覆盖整个画布，尽管任何图像的大小和位置都相对于根元素而定，就好像它们是为该元素单独绘制的一样。（换句话说，背景定位区域是针对根元素确定的。）如果根的“
background-color”值为“ transparent”，则画布的背景色取决于UA。根元素不会再次绘制该背景，即其背景的使用值是透明的。对于其根元素是HTML
HTML元素或XHTMLhtml元素的文档：如果根元素上“ background-image”的计算值为“
none”且其“ background-color”为“ transparent”，则用户代理必须改为传播从该元素的第一个HTMLBODY或XHTMLbody子元素计算背景属性的值。该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造成的背景属性适用于整个视口。在这里更多。
