将背景应用于< html>和/或< body> [英] Applying a background to <html> and/or <body>
问题描述
http://jsfiddle.net/julien_c/GmAL4/
我发现如果你应用CSS背景到 这种差异是否是预期的行为？ 如何叠加两个全屏背景半透明图片？） 这是正确的行为。 1 元素成为画布的背景，并且其背景绘制区域延伸以覆盖整个画布，但是任何图像相对于根元素被定大小和定位，就好像它们为该元素单独绘制的那样。 （换句话说，背景定位区域被确定为根元素）如果根的'background-color'值是'transparent'，画布的背景颜色是UA依赖的。 对于根元素为HTML / code>或 如果您要合并两个背景图片你需要依靠多个背景。主要有两天这样做： 在CSS2中，这是两个元素的样式派上用场：简单地设置背景图像为 顺便说一下，你必须指定 唯一的注意事项是，在单个多层背景中，层可以具有背景颜色。您可以在此示例中看到上层中缺少 - 如果使用多层背景，你需要支持旧的浏览器，但是，你需要使用CSS2方法，这是支持一直回到IE7。 我在这个其他答案解释，伴随的小提琴， 1 这可能源于设置HTML http://jsfiddle.net/julien_c/GmAL4/ I found that if you apply a CSS background to However, if you apply a CSS background to both Is this discrepancy expected behavior? How would I go about superimposing two fullscreen backgrounds (say, a background color and a semi-transparent image?) This is correct behavior.1 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 That said, however, you can superimpose any background image over a background color on a single element (either 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 Incidentally, the reason why you have to specify 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 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 And don't worry — the behavior specified above with propagating background values works exactly the same even if you use multi-layered backgrounds. 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. My comments under this other answer explain, with an accompanying fiddle, how 1 This may have its roots in setting the HTML 这篇关于将背景应用于< html>和/或< body>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ body ，它占用整个页面（无论实际的高度或宽度但是，如果将CSS背景应用于 html ，则 和 body ， body 的背景不占用整个页面 p>
body 不会立即占据整个高度视口，即使它出现时，你只应用背景的后者。事实上，如果你不给它自己的背景， html 元素将采用 body 和 html 会将此传递到视口：
的文档， HTML 元素或XHTML html 元素：如果根元素上的'background-image'的计算值为'none' -color'是'transparent'，用户代理必须从该元素的第一个HTML BODY 或XHTML body 子元素。 BODY 元素的背景属性的使用值是其初始值，传播的值被视为在根元素上指定。建议HTML文档的作者为 BODY 元素而不是 HTML 元素指定画布背景。然而，你可以将任何背景图像叠加在单个元素的背景颜色上（ html body ），而不必依赖两个元素 - 只需使用 background-color background-image 或将它们组合在背景速记属性中：
body {
background：#ddd url（background.png）center top no-repeat;
}
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 和 c $ c>分别是因为两个元素都没有任何内在高度。默认情况下都是 height：auto 。它是具有100％高度的视口，因此 height：100％取自视口，然后应用于 body 在CSS3中，语法已扩展，因此您可以在一个属性中声明多个背景值，无需将背景应用到多个元素（或调整 height / min-height ）：
body {
background：url（background2.png）center top no-repeat，
#ddd url（background1.png）repeat;
}
透明值。
body 如何实际上偏离
背景和 bgcolor body 的属性，导致background属性应用于整个视口。更多关于这里。 body, it takes up the whole page (no matter what the actual height or width of body is).html and body, the background for body does not take up the whole page.body 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 html element will take on the background of body if you don't give it its own background, and html will pass this on to the viewport:
HTML element or an XHTML html element: 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 HTML BODY or XHTML body child element. The used values of that BODY element'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 the BODY element rather than the HTML element.html or body), without having to rely on two elements — simply use background-color and background-image or combine them in the background shorthand property:body {
background: #ddd url(background.png) center top no-repeat;
}
html and another image to body which you wish to superimpose over the first. To ensure the background image on body displays at full viewport height, you need to apply height and min-height respectively as well:html {
height: 100%;
background: #ddd url(background1.png) repeat;
}
body {
min-height: 100%;
background: transparent url(background2.png) center top no-repeat;
}
height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.height/min-height):body {
background: url(background2.png) center top no-repeat,
#ddd url(background1.png) repeat;
}
transparent value is missing from the upper layer.body is actually offset from html by default margins even though it looks like it's being padded out instead, again owing to this seemingly strange phenomenon.
background and bgcolor attributes of body causing the background attribute to apply to the entire viewport. More on that here.
