使用color属性设置文字颜色，支持颜色名、十六进制、RGB、RGBA；2. 用background-color设置背景色；3. background-image添加背景图，配合repeat、position、size、attachment控制显示；4. background简写属性整合背景样式。示例展示了文本与背景的常用配置，强调可读性与视觉协调。
设置文字颜色和背景是CSS中最基础也是最常用的样式操作。通过几个关键属性，可以轻松控制网页中文本的前景色（即文字颜色）和元素的背景效果。
1. 设置文字颜色（color）
使用 color 属性来定义文本的颜色。颜色值可以用多种方式表示：
-
颜色名称：如
red、blue、green、black、white等 -
十六进制值：如
#ff0000（红色）、#000000（黑色）、#ffffff（白色） -
RGB值：如
rgb(255, 0, 0)、rgb(0, 0, 0) -
RGBA值（支持透明度）：如
rgba(255, 0, 0, 0.5)
示例：
p {
color: #333; /* 深灰色文字 */
}
h1 {
color: rgb(255, 102, 0); /* 橙色文字 */
}2. 设置背景颜色（background-color）
使用 background-color 属性为元素设置背景色。语法与 color 类似，支持相同类型的颜色值。
立即学习“前端免费学习笔记（深入）”；
默认情况下，背景颜色是透明的（transparent），你可以覆盖它。
示例：
div {
background-color: #f0f0f0; /* 浅灰色背景 */
}
header {
background-color: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
}3. 设置背景图片（background-image）
除了纯色背景，还可以用图片作为背景。使用 background-image 属性，并配合其他子属性控制显示效果。
-
background-image：指定图片路径，如
url('bg.jpg') -
background-repeat：控制图片是否平铺，常用值有
repeat、no-repeat、repeat-x、repeat-y -
background-position：设置图片位置，如
center、top left、50% 50% -
background-size：设置图片大小，如
cover（充满容器）、contain（完整显示）、或具体尺寸如100px 200px -
background-attachment：控制背景是否随内容滚动，如
scroll或fixed
示例：
section {
background-image: url('pattern.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}4. 简写背景属性（background）
可以使用 background 简写属性一次性设置多个背景相关属性，顺序通常为：
background: [color] [image] [repeat] [position] [size] [attachment];
示例：
div {
background: #fff url('bg.jpg') no-repeat center/cover fixed;
}这个例子设置了白色背景色、居中不重复的背景图、大小为cover，并固定不随页面滚动。
基本上就这些。掌握 color 和 background 相关属性，就能灵活控制网页中文本和背景的视觉效果。注意在设计时考虑可读性，比如浅色背景配深色文字，避免颜色冲突。
