Question

Google的404 page使用边距和填充来将内容集中在body标记中，如下所示：

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

然后将破碎的机器人的图像设置为身体标签上的背景图像，并定位在右上方，使其显示在主要内容的右侧。

* > 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

技术原因是＆＃34;因为specification这样说＆＃34;：

但是，对于HTML文档，我们建议作者指定BODY元素的背景而不是HTML元素。对于根元素是HTML＆＃34; HTML＆＃34;元素或XHTML＆＃34; html＆＃34;计算了＆＃39;透明＆＃39;的值的元素为了背景色＆＃39;并且没有＆＃39;对于＆＃39; background-image＆＃39;，用户代理必须使用该元素的第一个HTML＆＃34; BODY＆＃34;的背景属性的计算值。元素或XHTML＆＃34; body＆＃34;绘制画布背景时的元素子元素，不得为该子元素绘制背景。如果仅为根元素绘制它们，那么这些背景也必须固定在同一点上。

这可能是因为在过去的糟糕时期，页面的背景由body元素上的bgcolor和background属性决定，因此CSS已经制作并且＃34;兼容＆＃34 ;与现有做法。

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

1 个答案: