调整背景色

作为一个Web开发人员，最常见的事情之一就是改变HTML元素的背景颜色。但是，如果您不知道如何使用CSS背景色属性，可能会产生混淆。在本文中，我们讨论以下几点。

1.HTML的默认背景颜色值。

2.如何改变P的背景色，这是一个很常见的元素

3.CSS盒子模型的哪些部分会受到这个背景色属性的影响，以及

4.该属性可以采用不同的值。

元素的默认背景色。

p的默认背景色是透明的。因此，如果不指定p的背景色，它将显示其父元素的背景色。

更改Div的背景颜色

在这个例子中，我们将改变下面p的背景色。

没有任何样式，会在视觉上转换成如下。

让我们通过给类添加一个样式来改变P的背景色。您可以通过尝试HTML文件中的实例来做到这一点。

这将导致以下结果:

看啊！我们已经成功地更改了这个p的背景色，接下来，让我们进一步了解这个属性。让我们看看背景色属性如何影响CSS-box模型的各个部分。

背景和CSS盒子模型

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

如果不熟悉箱体模型，可以查阅相关资料。问题是，当你改变P的背景色时，盒子模型的哪一部分会受到影响？简单的回答就是填充区域和内容区域。我们用一个例子来证实这一点。

这将导致:

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

最后，让我们讨论一下背景色属性可以取的值。

背景颜色值

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

请注意，它们的结果都是相同的背景色。

背景颜色属性可以采用的其他值包括HSL值、特殊关键字值和全局值。这是每一个例子。

额外关注

设置元素的背景色时，确保背景色和它所包含的文本颜色之间的对比度足够高是很重要的。这是为了确保视觉障碍者可以轻松阅读文本。

第一个P的背景色和文字颜色的对比度不够高，大家都看不到。所以，除非你是唯一在用的网站，而且你的视力非常好，否则就要避免这种颜色组合。

第二个p在背景色和文字色之间有更好的对比。因此，它使人们更容易阅读和阅读。

结论

在本文中，我们看到了如何改变p的背景颜色。我们还讨论了CSS盒模型的哪些部分会受到背景颜色变化的影响。最后，我们讨论背景色属性可以取的值。

希望这篇文章对你有帮助。感谢您的阅读。