html/body 背景色对浏览器背景色的影响

给 body 提供背景色时，整个浏览器背景色会随之改变，即使 body 的大小不足以填满浏览器视窗。但为 html 设置背景色后，浏览器背景色又会变为 html 的背景色。为何会出现这种现象？

示例：

body {
  background:#069; /* 绿色 */
  margin:100px;
  border:30px solid #093; /* 橙色边框 */
}

在该示例中，只有 body 有背景色，而 html 没有。可以看到，整个浏览器背景是绿色的，因为 body 的背景色占满了整个视窗。

html {
  background:#999; /* 灰色 */
}

body {
  background:#069; /* 绿色 */
  margin:100px;
  border:30px solid #093; /* 橙色边框 */
}

然而，当我们为 html 也设置背景色时，浏览器背景色变为灰色（html 的背景色），而不是绿色的 body 背景色。

原因：

根据 w3c 规范：

如果根元素 (html) 的背景图像计算值为 none，且背景色为透明，用户代理必须从该根元素的第一个 body 子元素中传播背景属性的计算值。该 body 元素的背景属性的已用值是其初始值，传播的值如同在根元素上指定。建议 html 文档的作者为 body 元素而不是 html 元素指定画布背景。

这意味着，当 body 的背景透明、图像为 none 时，浏览器会将 body 中的背景属性值传递给根元素 (html)，此时 html 的背景属性值会覆盖根元素的默认值为浏览器背景色。因此，浏览器背景色会变成 html 指定的灰色。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！