div背景色更改闪烁_HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明

最新推荐文章于 2024-06-14 20:15:32 发布

cumian8165

最新推荐文章于 2024-06-14 20:15:32 发布

阅读量1.1k

点赞数

文章标签： css java html python 机器学习

原文链接：https://www.freecodecamp.org/news/html-background-color-tutorial-how-to-change-a-div-background-color-explained-with-code-examples/

版权

div背景色更改闪烁

One of the most common things you may have to do as a web developer is to change the background-color of an HTML element. But it may be confusing to do if you do not understand how to use the CSS background-color property.

作为Web开发人员，您可能要做的最常见的事情之一就是更改HTML元素的背景颜色。但是，如果您不了解如何使用CSS background-color属性，可能会造成混淆。

In the article, we discuss

在本文中，我们讨论

the default background color value of an HTML element
HTML元素的默认背景色值
how to change the background color of a div, which is a very common element
如何更改div的背景颜色，这是非常常见的元素
which parts of the CSS box model are affected by the background-color property, and
CSS盒子模型的哪些部分受background-color属性影响，以及
the different values this property can take.
此属性可以采用的不同值。

元素的默认背景色 (Default Background Color of an Element)

The default background color of a div is transparent. So if you do not specify the background-color of a div, it will display that of its parent element.

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

更改Div的背景颜色 (Changing the Background Color of a Div)

In this example, we will change the background colors of the following divs.

在此示例中，我们将更改以下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>

Without any styling, this will translate to the following visually.

没有任何样式，它将在视觉上转换为以下内容。

Let's change the background color of the divs by adding styles to the classes. You can follow along by trying the examples in an HTML file.

让我们通过向类中添加样式来更改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>

This will result in the following:

这将导致以下结果：

Cool! We have successfully changed the background color of this div. Next, let's get to know more about this property. Let's see how the background-color property affects parts of the CSS-box model.

凉！我们已成功更改了该div的背景颜色。接下来，让我们更多地了解此属性。让我们看看background-color属性如何影响CSS-box模型的各个部分。

背景颜色和CSS Box模型 (Background Color and the CSS Box Model)

According to the CSS box model, all HTML elements can be modeled as rectangular boxes. Every box is composed of 4 parts as shown in the diagram below.

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

You can read up on the box model if you are not familiar with it. The question is, which part of the box model is affected when you change the background color of a div? The simple answer is the padding area and the content area. Let's confirm this by using an example.

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

<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>

This will result in:

这将导致：

From the example above, we can see that the margin area and the border area are not affected by the change in background color. We can change the color of the border using the border-color property. The margin area remains transparent and reflects the background color of the parent container.

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

Finally, let's discuss the values the background-color property can take.

最后，让我们讨论background-color属性可以采用的值。

背景色值 (Background-color Values)

Just like the color property, the background-color property can take six different values. Let's consider the three most common values with an example. In the example, we set the background-color of the div to red with different values.

就像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>

Notice that they all result with the same background color.

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

Other values the background-color property can take include HSL value, special keyword values and global values. Here are examples of each of them.

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;

You can read more on each of these values here.

您可以在此处阅读有关这些值的更多信息。

额外注意 (Extra Note)

When setting the background color of an element, it is important to ensure that the contrast ratio of the background color and the color of the text it contains is high enough. This is to ensure that people with low vision can easily read the text.

设置元素的背景色时，重要的是要确保背景色和其包含的文本颜色的对比度足够高。这是为了确保弱视人士可以轻松阅读文本。

Consider these two divs.

考虑这两个div。

The contrast between the background color of the first div and the color of the text is not high enough for everyone to see. So unless you are the only one using the website you are building and you have very good eyesight, you should avoid such color combinations.

第一个div的背景颜色与文本颜色之间的对比度不够高，每个人都看不到。因此，除非您是唯一使用该网站的人，并且您的视力很好，否则应避免这种颜色组合。

The second div has a much better contrast ratio between the background color and the color of the text . Thus, it is more accessible and clearer for people to read.

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

结论 (Conclusion)

In this article, we saw how you can change the background-color of a div. We also discussed which parts of the CSS box model are affected by the change in background-color. Finally, we discussed the values the background-color property can take.

在本文中，我们看到了如何更改div的背景颜色。我们还讨论了CSS盒子模型的哪些部分受背景颜色变化的影响。最后，我们讨论了background-color属性可以采用的值。

I hope you found this article useful. Thanks for reading.

希望本文对您有所帮助。谢谢阅读。