将背景应用于<html>和/或<body>

这是正确行为.1 标准模式, body, 以及html，不会立即占据整个视口的高度，即使只对后者应用背景时也是如此。事实上，html元素将以body如果你不给它自己的背景，而且html将此传递到画布上：根元素的背景成为画布的背景，其背景绘制区域扩展到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就好像它们是单独为该元素绘制的一样。(换句话说，背景定位区域是为根元素确定的。)如果根的“背景颜色”值是“透明的”，则画布的背景色依赖于UA。根元素不会再次绘制此背景，即其背景的使用值是透明的。对于根元素为HTML的文档HTML元素或XHTMLhtml元素：如果根元素上的“背景-图像”的计算值为“无”，且其“背景色”为“透明”，则用户代理必须从该元素的第一个HTML中传播背景属性的计算值。BODY或XHTMLbody子元素的使用值BODY元素的背景属性是它们的初始值，传播的值被视为是在根元素上指定的。建议HTML文档的作者为BODY元素而不是HTML元素。但是，您可以将任何背景图像叠加在单个元素上(其中之一)。html或body)，而不必依赖两个元素-只需使用background-color和background-image或者将它们合并到background速记财产：body {     background: #ddd url(background.png) center top no-repeat;}如果你想把两幅背景图像，你需要依赖多种背景。这主要有两天的时间：在CSS 2中，这两个元素的样式都很有用：只需将背景图像设置为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%从viewport中取出，然后应用于body作为允许滚动内容的最低限度。在CSS 3中，语法已经扩展，所以您可以在单个属性中声明多个背景值，消除了将背景应用于多个元素(或调整)的需要。height/min-height):body {     background: url(background2.png) center top no-repeat,                  #ddd url(background1.png) repeat;}唯一的警告是，在一个单一的多层背景，只有最底层可能有一个背景颜色。在这个例子中，您可以看到transparent值从上层丢失。不要担心-即使您使用多层背景，上面与传播背景值一起指定的行为也完全一样。但是，如果您需要支持较旧的浏览器，则需要使用CSS 2方法，该方法一直支持到IE7。我的评论另一个答案解释，伴随着小提琴，如何body实际上抵消了html在默认情况下，尽管它看起来像正在被填补，但同样由于这一看似奇怪的现象。1 这可能在设置HTML中有其根源。background和bgcolor属性body导致背景属性应用于整个视图端口。更多关于这一点这里.

将背景应用于<html>和/或<body>

2回答