原文：HTML Background Color Tutorial – How to Change a Div Background Color, Explained with Code Examples，作者：Sarah Chima Atuonwu
作为 Web 开发人员，你可能需要做的最常见的事情之一就是更改 HTML 元素的背景颜色。但如果你不了解如何使用 CSS background-color 属性，可能会产生混淆。
在这篇文章中，我们讨论
HTML 元素的默认背景颜色值如何改变很常见的元素 div 的背景颜色CSS 盒子模型的哪些部分受 background-color 属性的影响，以及此属性可以采用的不同值元素的默认背景颜色div 的默认背景颜色是 transparent。因此，如果你不指定 div 的背景颜色，它将显示其父元素的背景颜色。
更改 Div 的背景颜色在此示例中，我们将更改以下 div 的背景颜色。
没有任何样式，这将显示如下：
让我们通过向类添加样式来更改 div 的背景颜色。你可以继续尝试 HTML 文件中的示例。
这将显示如下：
酷！我们已经成功地改变了这个 div 的背景颜色。接下来，让我们进一步了解一下这个属性。让我们看看 background-color 属性如何影响 CSS 盒子模型的。
背景颜色和 CSS 盒子模型根据 CSS 盒子模型，所有 HTML 元素都可以被构建为矩形框。每个盒子由 4 个部分组成，如下图所示：
CSS 盒子模型如果你不熟悉盒子模型，可以了解一下。问题是，当你改变一个 div 的背景颜色时，盒子模型的哪一部分会受到影响？简单的答案是 padding（填充）区域和 content（内容）区域。让我们通过一个例子来确认这一点。
This is the parent div which contains the div we are testing
This example shows that changing the background color of a div does not affect the border and margin of the div.
结果如下：
从上面的例子中我们可以看出，margin（边距）区域和 border（边框）区域不受背景颜色变化的影响。我们可以使用 border-color 属性来改变边框的颜色。边距区域保持透明并应用父容器的背景颜色。
最后，让我们讨论一下 background-color 属性可以取的值。
background-color 的值就像 color 属性一样，background-color 属性可以有六个不同的值。让我们用一个例子来考虑三个最常见的值。在示例中，我们将 div 的背景颜色设置为具有不同值的红色。
The background property can take six different values.
The background property can take six different values.
The background property can take six different values.
请注意，它们都具有相同的背景颜色。
background-color 属性可以采用的其他值包括 HSL 值、特殊关键字值和全局值。以下是它们中的每一个的示例。
/* HSL value */
background-color: hsl(0, 100%, 25%;
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
你可以在此处阅读有关每个值的更多信息。
更多说明在设置元素的背景色时，重要的是要确保背景色与其包含的文本颜色的对比度足够高。这是为了确保视力不好的人可以轻松阅读文本。
考虑这两个 div：
第一个 div 的背景颜色和文字颜色的对比度不够高。因此，除非你是唯一一个使用你正在构建的网站的人，并且你的视力非常好，否则你应该避免这种颜色组合。
第二个 div 的背景颜色和文本颜色之间具有更好的对比度。因此，人们阅读起来更容易理解、更清晰。
小结在本文中，我们了解了如何更改 div 的背景颜色、CSS 盒子模型的哪些部分会受到背景颜色变化的影响，以及 background-color 属性可以取的值。
希望这篇文章对你有帮助，谢谢阅读。