最直接的方法是使用background-color属性，可选命名颜色、十六进制、RGB、RGBA或HSL/HSLA格式；它不被子元素继承，常与background-image协同工作，作为图片加载失败或透明区域的备用底色，同时需注意与文本的对比度以确保可访问性。
为CSS容器设置背景颜色，最直接且普遍的方法就是利用
background-color属性。它能让你轻松地为任何HTML元素填充纯色背景，无论是
div、
section还是
p标签，都能瞬间拥有你想要的色彩。
要实现纯色填充，我们只需要在CSS规则中指定
background-color属性，并为其赋予一个颜色值。这个颜色值可以是多种形式：
-
命名颜色（Named Colors）：比如
red
、blue
、green
。这最直观，但颜色选择有限。 -
十六进制颜色码（Hexadecimal Colors）：例如
#FF0000
（红色）、#00FF00
（绿色）、#0000FF
（蓝色）。这是前端开发中最常用的方式，提供了1600多万种颜色选择，非常精确。 -
RGB颜色值（RGB Colors）：
rgb(255, 0, 0)
。通过红、绿、蓝三原色的组合来定义颜色，每个值的范围是0-255。 -
RGBA颜色值（RGBA Colors）：
rgba(255, 0, 0, 0.5)
。在RGB的基础上增加了Alpha通道，用于控制颜色的透明度，0代表完全透明，1代表完全不透明。 -
HSL/HSLA颜色值（HSL/HSLA Colors）：
hsl(0, 100%, 50%)
。基于色相（Hue）、饱和度（Saturation）、亮度（Lightness）来定义颜色，更符合人眼对颜色的感知，HSLA同样包含透明度。
选择哪种格式，往往取决于项目规范或个人习惯。我个人偏好十六进制，因为它足够简洁且精确，在设计工具中也随处可见。
/* 示例：为一个div设置背景颜色 */
.my-container {
width: 300px;
height: 200px;
background-color: #3498db; /* 使用十六进制颜色码，一种漂亮的蓝色 */
border: 1px solid #2980b9;
padding: 20px;
margin-bottom: 20px;
}
.another-container {
background-color: rgba(255, 99, 71, 0.7); /* 使用RGBA，带一点透明度的番茄红 */
width: 250px;
height: 150px;
margin-top: 10px;
}这里值得一提的是，
background-color属性是不会被子元素继承的。也就是说，如果你给父元素设置了背景色，子元素并不会自动拥有相同的背景色，除非子元素自身是透明的，或者没有设置自己的背景色，那样你才能“透过”子元素看到父元素的背景。这其实挺合理的，不然样式控制起来会乱套。
立即学习“前端免费学习笔记（深入）”；
CSS背景颜色与背景图片如何协同工作？
这其实是一个很实用的问题，因为在实际项目中，纯色背景虽然常见，但很多时候我们还需要更丰富的视觉效果，比如背景图片。好消息是，
background-color和
background-image这两个属性并非互斥，它们可以完美地协同工作。
简单来说，
background-color会作为背景图片的底层，或者说是一个“备用方案”。当你的
background-image属性指定了一张图片时，浏览器会尝试加载并显示这张图片。如果图片成功加载，并且它不是完全透明的，那么它会覆盖在
background-color之上。但如果出现以下几种情况，
background-color的作用就凸显出来了：
-
图片加载失败：网络问题、路径错误等，此时
background-color
会立即填充，避免页面出现空白或破损图标。这是一种很好的用户体验保障。 -
图片是透明的（PNG、WebP等）：图片的透明区域会透出下方的
background-color
。这对于创建一些叠加效果非常有用，比如一个带透明度的logo浮在一个纯色背景上。 -
图片尺寸小于容器：如果
background-repeat
设置为no-repeat
，图片只显示一次，那么图片周围的区域就会显示background-color
。 -
图片正在加载中：在图片完全加载出来之前，
background-color
可以作为临时的视觉填充。
所以，我个人的习惯是，即使确定要用背景图片，也总会给容器设置一个合适的
background-color。这就像给舞台剧的背景幕布先涂一层底色，即使前景道具还没摆好，也不会显得空洞。
.hero-section {
width: 100%;
height: 400px;
background-color: #f0f0f0; /* 备用背景色，或图片透明区域的底色 */
background-image: url('path/to/your/hero-image.jpg'); /* 主背景图片 */
background-size: cover; /* 确保图片覆盖整个容器 */
background-position: center; /* 图片居中 */
background-repeat: no-repeat; /* 不重复 */
color: #333; /* 文本颜色，与背景形成对比 */
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
}你看，当
hero-image.jpg加载时，它会覆盖
#f0f0f0。但如果图片是透明的，或者加载失败，用户看到的至少是一个浅灰色背景，而不是一个空白或者一个丑陋的图片破损图标。
如何处理背景颜色与文本内容的对比度问题？
这不仅仅是一个美学问题，更是一个关乎用户体验和可访问性的重要技术考量。背景颜色和文本颜色之间的对比度不足，会导致内容难以阅读，对于视力受损的用户来说更是灾难性的。在设计和开发时，我总会提醒自己，好看固然重要，但可读性才是基石。
Web内容可访问性指南（WCAG）对此有明确的建议，通常要求文本与背景的对比度至少达到4.5:1（AA级）或7:1（AAA级）。这听起来有点抽象，但幸运的是，我们有很多工具可以帮助我们检查和选择颜色：
- 在线对比度检查器：例如WebAIM Contrast Checker，你输入前景和背景的颜色值，它会告诉你是否达标。
- 浏览器开发者工具：现代浏览器的检查器通常都内置了颜色选择器和对比度分析功能。
那么，具体怎么做呢？
-
选择高对比度的配色方案：这是最直接的方法。深色背景配浅色文本，或浅色背景配深色文本。例如，
background-color: #2c3e50;
（深蓝）配color: #ecf0f1;
（浅灰），或者background-color: #f8f9fa;
（近白）配color: #343a40;
（深灰）。 -
利用半透明叠加层：如果你有一个复杂的背景（比如背景图片或者渐变色），直接在上面放文本可能对比度不够。这时，可以在背景和文本之间增加一个半透明的
div
或伪元素作为背景，用rgba()
来设置其背景色。这样既能保留背景的视觉元素，又能确保文本清晰。.card-with-overlay { background-image: url('path/to/textured-bg.jpg'); background-size: cover; position: relative; /* 确保伪元素定位正确 */ color: white; /* 文本颜色 */ padding: 20px; } .card-with-overlay::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,
