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

1.HTML元素的默认背景色值

2.如何更改div的背景颜色，这是非常常见的元素

3.该background-color属性会影响CSS盒子模型的哪些部分，以及

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

元素的默认背景色

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

更改Div的背景颜色

在此示例中，我们将更改以下div的背景颜色。

I love HTML

I love CSS

I love JavaScript

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

让我们通过向类中添加样式来更改div的背景颜色。您可以通过尝试HTML文件中的示例进行操作。

I love HTML

I love CSS

I love JavaScript

这将导致以下结果：

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

背景颜色和CSS Box模型

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

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

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.

这将导致：

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

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

背景色值

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

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的背景颜色。我们还讨论了CSS Box模型的哪些部分受背景颜色变化的影响。最后，我们讨论了background-color属性可以采用的值。

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

匹配指定内容的div_HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明...相关推荐

div背景色更改闪烁_HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明
div背景色更改闪烁 One of the most common things you may have to do as a web developer is to change the bac ...
java匹配出某单词除外_java正则匹配指定内容以外的内容
今天,遇到一个需要匹配出指定内容以外的内容的需求. 乍一看,需求貌视很简单啊,直接上非贪婪模式的双向零宽断言(有的资料上也叫预搜索.预查.环视lookaround): 比如,我要匹配串内 ...
使用Google、百度等搜索引擎完全匹配指定内容搜索
2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/ZhenyuanLiu/blog/1819744
php遍历文件夹下文件内容_php遍历文件夹下所有文件的代码示例
本篇文章给大家带来的内容是关于php遍历文件夹下所有文件的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 不论是面试还是正常工作需要都会用到遍历文件夹下的所有文件,今天就记录 ...
linux 上使用wc -l命令快速查看文件内容有多少行，以及如何匹配指定字符查看多少行
1 linux的cat -n命令查看文件内容一共有多少行 1.cat -n命令查看文件多少行 cat -n filename 如:cat -n gallery_color_depth.txt - 2. ...
5.1 在工作表中查找指定内容的单元格 [原创Excel教程]
1. 本节课将为您演示查找功能的使用,使用查找功能可以根据需要查找的内容,快速定位包含查找内容的单元格.首先点击[查找和选择]按钮,打开命令菜单. 2. 然后选择列表中的[查找]命令,打开查找和替换窗 ...
python txt提取特定数据_Python提取列表中的内容用“python”怎么提取文件里的指定内容？...
用"python"怎么提取文件里的指定内容? python读取文件内容的方法: 一.最方便的方法是一次性读取文件中的所有内容并放置到一个大字符串中: all_the_text = ...
python爬虫搜特定内容的论文_python基于BeautifulSoup实现抓取网页指定内容的方法...
python基于BeautifulSoup实现抓取网页指定内容的方法更新时间:2015年07月09日 10:12:50 作者:光索与诺这篇文章主要介绍了python基于BeautifulSoup实 ...
el-table-column中格式化判断数据为空则显示指定内容
场景若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客_若依前后端分离搭建实现el-t ...

匹配指定内容的div_HTML背景色教程–如何更改Div背景色，并通过代码示例进行了说明...