将背景应用于 <html> 和/或 <body>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10947541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying a background to <html> and/or <body>
提问by julien_c
http://jsfiddle.net/julien_c/GmAL4/
http://jsfiddle.net/julien_c/GmAL4/
I found that if you apply a CSS background to body, it takes up the whole page (no matter what the actual height or width of bodyis).
我发现如果将 CSS 背景应用于body，它会占据整个页面（无论 的实际高度或宽度body是多少）。
However, if you apply a CSS background to both htmland body, the background for bodydoes not take up the whole page.
但是，如果对html和都应用 CSS 背景body，则 的背景body不会占据整个页面。
Is this discrepancy expected behavior?
这种差异是预期行为吗？
How would I go about superimposing two fullscreen backgrounds (say, a background color and a semi-transparent image?)
我将如何叠加两个全屏背景（例如，背景颜色和半透明图像？）
回答by BoltClock
This is correct behavior.1In standards mode, body, as well as html, doesn't immediately take up the entire height of the viewport, even though it appears so when you only apply a background to the latter. In fact, the htmlelement will take on the background of bodyif you don't give it its own background, and htmlwill pass this on to the canvas:
这是正确的行为。1在标准模式下，body，以及html，不立即采取了视区的整个高度，即使它出现，所以当你只应用背景后者。事实上，如果你不给它自己的背景，html元素将采用body背景，并将其html传递给画布：
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas, although any images are sized and positioned relative to the root element as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) If the root's ‘background-color' value is ‘transparent', the canvas's background color is UA dependent. The root element does not paint this background again, i.e., the used value of its background is transparent.
For documents whose root element is an HTML
HTMLelement or an XHTMLhtmlelement: if the computed value of ‘background-image' on the root element is ‘none' and its ‘background-color' is ‘transparent', user agents must instead propagate the computed values of the background properties from that element's first HTMLBODYor XHTMLbodychild element. The used values of thatBODYelement's background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background for theBODYelement rather than theHTMLelement.
根元素的背景成为画布的背景，其背景绘制区域扩展到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就好像它们是为该元素单独绘制的一样。（换句话说，背景定位区域是根据根元素确定的。）如果根元素的 'background-color' 值为 'transparent'，则画布的背景颜色是 UA 相关的。根元素不再绘制此背景，即其背景的使用值是透明的。
对于根元素是 HTML
HTML元素或 XHTMLhtml元素的文档：如果根元素上 'background-image' 的计算值是 'none' 并且它的 'background-color' 是 'transparent'，用户代理必须改为传播从该元素的第一个 HTMLBODY或 XHTMLbody子元素计算背景属性的值。该BODY元素背景属性的使用值是它们的初始值，传播的值被视为在根元素上指定。建议 HTML 文档的作者为BODY元素而不是HTML元素指定画布背景。
That said, however, you can superimpose any background image over a background color on a single element (either htmlor body), without having to rely on two elements — simply use background-colorand background-imageor combine them in the backgroundshorthand property:
也就是说，您可以将任何背景图像叠加在单个元素（html或body）的背景颜色上，而不必依赖两个元素——只需在速记属性中使用background-color和background-image或组合它们background：
body {
background: #ddd url(background.png) center top no-repeat;
}
If you wish to combine two background images, you need to rely on multiple backgrounds. There are chiefly two days to do this:
如果您希望组合两个背景图像，则需要依赖多个背景。主要有两天时间来做这个：
In CSS2, this is where styling both elements comes in handy: simply set a background image to
htmland another image tobodywhich you wish to superimpose over the first. To ensure the background image onbodydisplays at full viewport height, you need to applyheightandmin-heightrespectively as well:html { height: 100%; background: #ddd url(background1.png) repeat; } body { min-height: 100%; background: transparent url(background2.png) center top no-repeat; }Incidentally, the reason why you have to specify
heightandmin-heighttohtmlandbodyrespectively is because neither element has any intrinsic height. Both areheight: autoby default. It is the viewport that has 100% height, soheight: 100%is taken from the viewport, then applied tobodyas a minimum to allow for scrolling of content.In CSS3, the syntax has been extended so you can declare multiple background values in a single property, eliminating the need to apply backgrounds to multiple elements (or adjust
height/min-height):body { background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat; }The only caveat is that in a single multi-layered background, only the bottommost layer may have a background color. You can see in this example that the
transparentvalue is missing from the upper layer.And don't worry — the behavior specified above with propagating background values works exactly the same even if you use multi-layered backgrounds.
在 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-heighttohtml和to 的原因body是因为这两个元素都没有任何固有高度。两者都是height: auto默认的。它是具有 100% 高度的视口，因此height: 100%取自视口，然后应用到body最小以允许滚动内容。在 CSS3 中，语法得到了扩展，因此您可以在单个属性中声明多个背景值，从而无需将背景应用于多个元素（或调整
height/min-height）：body { background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat; }唯一需要注意的是，在单个多层背景中，只有最底层可能有背景颜色。您可以在此示例中看到
transparent上层缺少该值。不要担心 - 即使您使用多层背景，上面指定的传播背景值的行为也完全相同。
If you need to support older browsers, though, you'll need to go with the CSS2 method, which is supported all the way back to IE7.
但是，如果您需要支持较旧的浏览器，则需要使用 CSS2 方法，该方法一直支持到 IE7。
My comments under this other answerexplain, with an accompanying fiddle, how bodyis actually offset from htmlby default margins even though it looks like it's being padded out instead, again owing to this seemingly strange phenomenon.
我在评论这对方的回答解释，与随行小提琴，如何body实际上是从偏移html默认的利润率，即使它看起来像它的存在填补了代替，再次由于这个看似奇怪的现象。
1This may have its roots in setting the HTML backgroundand bgcolorattributes of bodycausing the background attribute to apply to the entire viewport. More on that here.
1这可能有其在设置HTML根background和bgcolor属性body造成的背景属性适用于整个视口。更多关于这里。
回答by Emmanuel Osimosu
Suggest reading this:
建议阅读这篇：
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/
Essentially, in the absence of a backgroundon the htmlelement, the bodybackgroundwill cover the page. If there is a backgroundon the htmlelement, the bodybackgroundbehaves just like any other element.
本质上，如果元素background上没有 a html，bodybackground将覆盖页面。如果元素background上有 a html，则其bodybackground行为与任何其他元素一样。
