为什么浏览器背景色会受 body 和 html 背景色的影响？

今天golang学习网给大家带来了《为什么浏览器背景色会受 body 和 html 背景色的影响？》，其中涉及到的知识点包括等等，无论你是小白还是老手，都适合看一看哦~有好的建议也欢迎大家在评论留言，若是看完有所收获，也希望大家能多多点赞支持呀！一起加油学习~

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 指定的灰色。

今天关于《为什么浏览器背景色会受 body 和 html 背景色的影响？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！