55 

$("#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是多少）。

但是，如果对html和都应用 CSS 背景body，则背景body 不会占据整个页面。

这种差异是预期的行为吗？

我将如何叠加两个全屏背景（例如，背景颜色和半透明图像？）

4

2 回答 2

64

这是正确的行为。1 在标准模式下,和body,并不会立即占据视口的整个高度，即使当您只对后者应用背景时它也会如此显示。事实上，如果你不给它自己的背景，元素将采用背景，并将其传递给画布：htmlhtmlbodyhtml

根元素的背景变成了画布的背景，并且它的背景绘制区域扩展到覆盖整个画布，尽管任何图像的大小和位置都相对于根元素，就好像它们是为该元素单独绘制的一样。（换句话说，背景定位区域被确定为根元素。）如果根的'background-color'值为'transparent'，则画布的背景颜色取决于UA。根元素不再绘制此背景，即其背景的使用值是透明的。

对于根元素是 HTMLHTML元素或 XHTMLhtml元素的文档：如果根元素上的 'background-image' 的计算值是 'none' 并且它的 'background-color' 是 'transparent'，则用户代理必须改为传播该元素的第一个 HTMLBODY或 XHTMLbody子元素的背景属性的计算值。该BODY元素的背景属性的使用值是它们的初始值，并且传播的值被视为在根元素上指定了它们。建议 HTML 文档的作者为BODY元素而不是HTML元素指定画布背景。

但是，也就是说，您可以将任何背景图像叠加在单个元素（或html或body）上的背景颜色上，而不必依赖两个元素 - 只需在速记属性中使用background-color和background-image或组合它们：background

body {
    background: #ddd url(background.png) center top no-repeat;
}

如果你想组合两个背景图片，你需要依赖多个背景。这样做主要有两天时间：

  • 在 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;
}

    顺便说一句，您必须分别指定heightand min-heighttohtml和的原因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上层缺少该值。

    不用担心 - 即使您使用多层背景，上面指定的传播背景值的行为也完全相同。

但是，如果您需要支持较旧的浏览器，则需要使用 CSS2 方法，该方法一直支持到 IE7。

我在这个其他答案下的评论解释了，伴随着小提琴，body实际上是如何从html默认边距偏移的，即使它看起来像是被填充了，这也是由于这种看似奇怪的现象。

1 这可能源于设置 HTMLbackground和导致背景bgcolor属性body应用于整个视口的属性。更多关于这里。

于 2012-06-08T11:01:35.500 回答
8

建议阅读：

https://css-tricks.com/just-one-of-those-weird-things-about-css-background-on-body/

本质上，在没有 a backgroundonhtml元素的情况下，body background将覆盖页面。如果元素background上有 a，则其行为就像任何其他元素一样。htmlbody background

于 2018-01-30T20:19:56.677 回答