为什么html标签没有设置背景颜色时，body背景图片不包含在body里面？答案

【问题标题】：Why is the body background image not contained inside the body when the html tag has no background color set?为什么html标签没有设置背景颜色时，body背景图片不包含在body里面？
【发布时间】：2016-09-17 11:10:43
【问题描述】：

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

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

【问题讨论】：

标签： html css image alignment document-body

【解决方案1】：

技术原因是“因为specification 这么说”：

但是，对于 HTML 文档，我们建议作者为 BODY 元素而不是 HTML 元素指定背景。对于根元素是 HTML "HTML" 元素或 XHTML "html" 元素的文档，其 'background-color' 的计算值为 'transparent' 和 'background-image' 的计算值为 'none'，用户代理必须改为使用为画布绘制背景时，从该元素的第一个 HTML“BODY”元素或 XHTML“body”元素子元素计算的背景属性值，并且不得为该子元素绘制背景。此类背景也必须锚定在与仅为根元素绘制时相同的位置。

这可能是因为在糟糕的过去，页面的背景是由 body 元素上的bgcolor 和background 属性决定的，因此 CSS 与现有实践“兼容”。

【讨论】：