HTML 背景颜色教程——如何更改 Div 背景颜色

原文：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 class="div-1"> I love HTML </div>
<div class="div-2"> I love CSS </div>
<div class="div-3"> I love JavaScript </div>

没有任何样式，这将显示如下：

让我们通过向类添加样式来更改 div 的背景颜色。你可以继续尝试 HTML 文件中的示例。

<style>
    .div-1 {
        background-color: #EBEBEB;
    }
    
    .div-2 {
    	background-color: #ABBAEA;
    }
    
    .div-3 {
    	background-color: #FBD603;
    }
</style>

<body>
    <div class="div-1"> I love HTML </div>
    <div class="div-2"> I love CSS </div>
    <div class="div-3"> I love JavaScript </div>
</body>

这将显示如下：

酷！我们已经成功地改变了这个 div 的背景颜色。接下来，让我们进一步了解一下这个属性。让我们看看 background-color 属性如何影响 CSS 盒子模型的。

背景颜色和 CSS 盒子模型

根据 CSS 盒子模型，所有 HTML 元素都可以被构建为矩形框。每个盒子由 4 个部分组成，如下图所示：

Screen-Shot-2020-05-08-at-11.07.00-AM-1 — CSS 盒子模型

如果你不熟悉盒子模型，可以了解一下。问题是，当你改变一个 div 的背景颜色时，盒子模型的哪一部分会受到影响？简单的答案是 padding（填充）区域和 content（内容）区域。让我们通过一个例子来确认这一点。


<style>
    body {
        background-color: #ABBAEA;
    }
    div {
        height: 200px;
        margin: 20px;
        border: 5px solid;
        background-color: #FBD603;
    }
</style>
<body>
    <div>
        <p>This is the parent div which contains the div we are testing</p>

        <div>
            <p>This example shows that changing the background color of a div does not affect the border and margin of the div.</p>
        </div>
    </div>
</body>

结果如下：

从上面的例子中我们可以看出，margin（边距）区域和 border（边框）区域不受背景颜色变化的影响。我们可以使用 border-color 属性来改变边框的颜色。边距区域保持透明并应用父容器的背景颜色。

最后，让我们讨论一下 background-color 属性可以取的值。

background-color 的值

就像 color 属性一样，background-color 属性可以有六个不同的值。让我们用一个例子来考虑三个最常见的值。在示例中，我们将 div 的背景颜色设置为具有不同值的红色。

<style>
    /* Keyword value/name of color */
    .div-1 {
        background-color: red;
    }
    
    /* Hexadecimal value */
    .div-2 {
       background-color: #FF0000;	 
    }
    
    /* RGB value */
    .div-3 {
    	background-color: rgb(255,0,0);
    }
    
</style>

<body>
    <div class="div-1">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-2">
        <p>The background property can take six different values.</p>
    </div>

    <div class="div-3">
        <p>The background property can take six different values.</p>
    </div>
</body>

请注意，它们都具有相同的背景颜色。

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 的背景颜色、CSS 盒子模型的哪些部分会受到背景颜色变化的影响，以及 background-color 属性可以取的值。

希望这篇文章对你有帮助，谢谢阅读。

元素的默认背景颜色

更改 Div 的背景颜色

背景颜色和 CSS 盒子模型

background-color 的值

更多说明

小结