CSS背景色设置及HTML、BODY元素的渲染优先级

在网页设计中，我们常常使用CSS来设置背景颜色，通常针对body元素进行操作，因为它包含了页面主要内容。然而，一个常见问题是：即使body元素的尺寸不足以填满整个浏览器窗口，设置body的背景色也会影响整个窗口的背景色。更令人困惑的是，如果同时为html元素设置背景色，浏览器背景色会变为html元素的背景色。这是因为html元素是页面的根元素，渲染优先级高于body元素。

让我们通过示例来理解：

仅设置body元素的背景色、边距和边框：

立即学习“前端免费学习笔记（深入）”；

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

body {
  background: #069;
  margin: 100px;
  border: 30px solid #093;
}

此时，body及其内容位于浏览器窗口中央，窗口其余部分显示浏览器默认背景色。

如果再为html元素添加背景色：

html {
  background: #999;
}
body {
  background: #069;
  margin: 100px;
  border: 30px solid #093;
}

整个窗口背景色将变为html元素设置的#999。这是因为html元素的不透明背景色覆盖了body元素的背景色以及body元素边距和边框外的区域。

这与CSS背景属性的继承和渲染机制有关。当html元素的背景图片属性为none且背景色为透明时，浏览器会将body元素的背景属性“传播”到html元素。但如果html元素设置了不透明背景色，则此传播机制失效，html元素的背景色将直接覆盖body元素的背景色。

因此，建议直接为body元素设置背景色，避免不必要的覆盖和冲突，确保背景色按预期应用于页面内容区域。