在 CSS 中，我们可以使用 background-color 属性来定义元素的背景颜色。
语法：
background-color: 颜色值;说明：
background-color 属性的取值是一个颜色值，包括以下几种情况（常用的是前 4 种）。
- 关键字，比如 red、orange、skyblue 等。
- 十六进制值，比如 #F1F1F1。
- RGB 值，比如 rgb(255, 255, 255)。
- RGBA 值，比如 rgba(255, 255, 255, 1.0)。
- HSL 值，比如 hsl(60deg 75% 45%)。
- HSLA 值，比如 hsla(60deg 75% 45% / 60%)。
- HWB 值，比如 hwb(120deg 0% 50% / 75%)。
提示:
- color 属性定义的是前景色（文本颜色），而 background-color 属性定义的是背景色。
- background-color 还有 2 种特殊取值：① transparent，表示透明；② currentcolor，表示使用当前元素 color 的值。
示例 1：CSS 背景颜色为 “关键字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 150px;
height: 30px;
}
div:nth-of-type(1) { background-color: red; }
div:nth-of-type(2) { background-color: green; }
div:nth-of-type(3) { background-color: blue; }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
上面例子使用关键字来定义背景颜色。关键字这种方式简单直观，非常适合初学的小伙伴们使用。
示例 2：CSS 背景颜色为 “十六进制值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 150px;
height: 30px;
}
div:nth-of-type(1) { background-color: #03FCA1; }
div:nth-of-type(2) { background-color: #048C02; }
div:nth-of-type(3) { background-color: #CE0592; }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
上面例子使用 “十六进制值” 来定义背景颜色。十六进制值这种方式，可以提供精确颜色控制，适合精细化设计。
示例 3：CSS 背景颜色为 “RGB 值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 150px;
height: 30px;
}
div:nth-child(1) { background-color: rgb(249, 175, 56); }
div:nth-child(2) { background-color: rgb(10, 191, 116); }
div:nth-child(3) { background-color: rgb(155, 38, 222); }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
上面例子使用 “RGB 值” 来定义背景颜色。RGB 值基于红绿蓝分量，能够直观反映颜色构成，适合 JavaScript 动态生成颜色。
示例 4：CSS 背景颜色为 “RGBA 值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 150px;
height: 30px;
}
div:nth-child(1) { background-color: rgba(249, 175, 56, 0.8); }
div:nth-child(2) { background-color: rgba(10, 191, 116, 0.8); }
div:nth-child(3) { background-color: rgba(155, 38, 222, 0.8); }
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
上面例子使用 “RGBA 值” 来定义背景颜色。RGBA 通过透明度来实现叠加效果，适合悬浮层或卡片设计。
注意: 使用 RGBA 设置透明度时，只会影响元素的背景，而不会影响上面的文字；如果使用 opacity 属性，则不仅会影响元素的背景，也会影响文字。
示例 5：:hover 结合 transition 属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.button {
display: inline-block;
padding: 10px 20px;
background-color: teal;
color: white;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: darkcyan;
}
</style>
</head>
<body>
<a href="#" class="button">提交</a>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到元素上时，页面效果如下图 2 所示。
分析：
这里我们使用 :hover 和 transition 属性实现背景色过渡，来模拟按钮的交互效果。
与颜色相关的 CSS 属性
在 CSS 中，与颜色相关的属性有很多，如下表所示。
| 属性 | 说明 |
|---|---|
| color | 文本颜色 |
| background-color | 背景颜色 |
| border-color | 边框颜色 |
| outline-color | 轮廓颜色 |
| text-decoration-color | 装饰线颜色 |
| text-emphasis-color | 强调颜色 |
