CSS如何改变元素的背景颜色？

csshtml

在CSS中，我们可以使用background-color属性来改变元素的背景颜色。这个属性接受各种颜色值，包括颜色名称、十六进制颜色代码、RGB值等。

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>改变元素背景颜色示例</title>
<style>
  .box {
    width: 200px;
    height: 200px;
    margin: 20px;
    padding: 20px;
    border: 1px solid black;
  }
  
  .red-background {
    background-color: red;
  }
  
  .green-background {
    background-color: #008000; /* 十六进制颜色代码 */
  }
  
  .blue-background {
    background-color: rgb(0, 0, 255); /* RGB值 */
  }
</style>
</head>
<body>

<div class="box red-background">红色背景</div>
<div class="box green-background">绿色背景</div>
<div class="box blue-background">蓝色背景</div>

</body>
</html>

在上面的示例中，我们创建了三个具有相同尺寸的盒子（div元素），并给它们分别添加了不同的背景颜色。.red-background类将背景颜色设置为红色，.green-background类使用十六进制颜色代码将背景颜色设置为绿色，而.blue-background类则使用RGB值将背景颜色设置为蓝色。通过将这些类应用到相应的div元素上，我们就能够改变这些元素的背景颜色。

上一篇：CSS如何实现元素的隐藏和显示？

下一篇：CSS中如何使用margin属性来调整元素间距？