$("#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 的实际高度或宽度是多少)。
但是，如果您将 CSS 背景应用于 html 和 body，则 body 的背景 不会占用整个页面。
这种差异是预期的行为吗？
我将如何叠加两个全屏背景(例如，背景颜色和半透明图像？)
最佳答案
This is correct behavior .1 In standards mode , body, as well as html 不会立即占据视口(viewport)的整个高度，即使它在您仅应用时看起来如此后者的背景。事实上，如果你不给它自己的背景，html 元素将采用 body 的背景，而 html 将通过这个在 Canvas 上:
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.
也就是说，您可以在单个元素(html 或 body)的背景颜色上叠加任何背景图像，而不必依赖两个元素— 只需使用 background-color 和 background-image 或将它们组合在 background 速记属性中:
body {
background: #ddd url(background.png) center top no-repeat;
}
如果您希望合并两个背景图像，您需要依赖多个背景。主要有两天的时间来做这件事:
在 CSS2 中，这就是为这两个元素设置样式的地方:只需将背景图片设置为
html，将另一张图片设置为body，您希望将其叠加在第一。为了确保body上的背景图像以全视口(viewport)高度显示，您还需要分别应用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% 高度的视口(viewport)，因此height: 100%从视口(viewport)中获取，然后作为允许内容滚动的最小值应用于body。在 CSS3 中，语法得到了扩展，因此您可以 declare multiple background values in a single property ，无需将背景应用于多个元素(或调整
height/min-height):body { background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat; }唯一需要注意的是，在单个多层背景中，只有最底层可能有背景颜色。您可以在此示例中看到上层缺少
transparent值。别担心 — 即使您使用多层背景，上面指定的传播背景值的行为也完全相同。
不过，如果您需要支持旧版浏览器，则需要使用 CSS2 方法，该方法一直支持到 IE7。
我在 this other answer 下的评论通过附带的 fiddle 解释了 body 实际上是如何在默认情况下从 html 偏移的，即使它看起来像是被填充了，再次由于这种看似奇怪的现象。
1 这可能源于设置 body 的 HTML background 和 bgcolor 属性导致背景属性应用于整个视口(viewport)。有关 here 的更多信息。
关于html - 将背景应用于 <html> 和/或 <body>，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10947541/