为什么当 html 标签没有设置背景颜色时，正文背景图像不包含在正文中？

Question

Google 的 404 page 使用边距和边距使 body 标签内的内容居中，如下所示：

body {
    margin: 7% auto 0;
    max-width: 390px;
    min-height: 180px;
    padding: 30px 0 15px;
}

损坏的机器人的图像随后被设置为 body 标签上的背景图像，并位于右上角，这样它就出现在主要内容的右侧。

* > body {
    background: url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;
    padding-right: 205px;
}

html 样式如下所示：

html {
    background: #fff;
    color: #222;
    padding: 15px;
}

为什么移除 html 标签的背景色后，图片会出现在页面的右上角？

html {
    //background: #fff;
    color: #222;
    padding: 15px;
}

Broken plunkr example

Answer 1

技术原因是"because the specification says so":

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

这可能是因为在糟糕的过去，页面的背景是由 body 元素上的 bgcolor 和 background 属性决定的，所以 CSS 被制作成 "compatible" 与现有实践。

为什么当 html 标签没有设置背景颜色时，正文背景图像不包含在正文中？

Why is the body background image not contained inside the body when the html tag has no background color set?

html

css

image

alignment

document-body