将背景应用到 <html>和/或<body> [英] Applying a background to <html> and/or <body>
问题描述
$("#toggle").click(function(){
$("html").toggleClass("bg");
});html.bg {
background: blue;
}
body {
background: yellow;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html class="bg">
<head>
</head>
<body>
Test
<br>
<button id="toggle">Toggle HTML background</button>
</body>
</html>我发现如果将 CSS 背景应用到 body，它会占据整个页面(无论 body 的实际高度或宽度是多少).
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 body is).
但是，如果您将 CSS 背景应用于 html 和 body，body 的背景 不会占用整页.
However, if you apply a CSS background to both html and body, the background for body does not take up the whole page.
这是预期行为的差异吗?
Is this discrepancy expected behavior?
我将如何叠加两个全屏背景(例如，背景颜色和半透明图像?)
How would I go about superimposing two fullscreen backgrounds (say, a background color and a semi-transparent image?)
推荐答案
这是 正确行为.1 在标准模式下，body，以及html，不会立即占据整个高度视口，即使当您只对后者应用背景时它会出现.事实上，html 元素将采用 body 的背景，如果你不给它自己的背景，html 会传递这个在画布上:
This is correct behavior.1 In 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 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 canvas:
根元素的背景成为画布的背景，其背景绘制区域扩展到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就好像它们是为该元素单独绘制的一样.(换句话说，背景定位区域是根据根元素确定的.)如果根元素的background-color"值为transparent"，则画布的背景颜色是 UA 相关的.根元素不再绘制这个背景，即其背景的使用值是透明的.
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.
对于根元素是 HTML HTML 元素或 XHTML html 元素的文档:如果根元素上 'background-image' 的计算值为 'none' 并且它的 'background-color' 是 'transparent'，用户代理必须从该元素的第一个 HTML BODY 或 XHTML body 子元素传播背景属性的计算值.该 BODY 元素的背景属性的使用值是它们的初始值，传播的值被视为在根元素上指定.建议 HTML 文档的作者为 BODY 元素而不是 HTML 元素指定画布背景.
For documents whose root element is an HTML 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 或 body)的背景颜色上叠加任何背景图像，而不必依赖两个元素— 只需使用 background-color 和 background-image 或将它们组合在 background 速记属性中:
That said, however, you can superimpose any background image over a background color on a single element (either 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;
}
如果您希望组合两个背景图像，您需要依赖多个背景.主要有两天时间来完成:
If you wish to combine two background images, you need to rely on multiple backgrounds. There are chiefly two days to do this:
在 CSS2 中，这就是为这两个元素设置样式的地方:只需将背景图像设置为
html，将另一个图像设置为您希望叠加的body在第一个.为了确保body上的背景图像以完整视口高度显示，您还需要分别应用height和min-height:
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;
}
顺便说一下，你必须分别指定 height 和 min-height 到 html 和 body 的原因是因为这两个元素都没有任何固有高度.默认情况下，两者都是 height: auto.它是具有 100% 高度的视口，因此 height: 100% 取自视口，然后应用到 body 作为最低限度，以允许滚动内容.
Incidentally, the reason why you have to specify 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.
在 CSS3 中，语法已经扩展，因此您可以声明多个背景单个属性中的值，无需将背景应用于多个元素(或调整height/min-height):
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;
}
唯一需要注意的是，在单个多层背景中，只有最底层可能有背景颜色.您可以在此示例中看到上层缺少 transparent 值.
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 transparent value 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 方法，该方法一直支持到 IE7.
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.
我在 这个其他下的评论回答解释，并附上fiddle，body实际上是怎样的与 html 的默认边距偏移，即使它看起来像是被填充了，也是由于这种看似奇怪的现象.
My comments under this other answer explain, with an accompanying fiddle, how 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.
1 这可能源于设置body的HTMLbackground和bgcolor属性导致背景属性应用于整个视口.更多关于 这里.
1 This may have its roots in setting the HTML background and bgcolor attributes of body causing the background attribute to apply to the entire viewport. More on that here.
这篇关于将背景应用到 <html>和/或<body>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
