使用background-color可为页面容器设置背景色，支持颜色名称、十六进制、RGB、HSL格式；配合padding、border-radius、box-shadow等属性提升视觉效果，并需注意文本对比度与可访问性，结合hover交互增强用户体验。
在CSS中设置背景颜色是美化页面容器最基础也最有效的方式之一。通过 background-color 属性，你可以为任何块级元素（如 div、section、header 等）添加背景色，提升视觉层次和整体美观度。
1. 使用 background-color 设置纯色背景
这是最直接的方法。你可以使用颜色名称、十六进制值、RGB 值或 HSL 值来定义颜色。
例如：-
background-color: blue;— 使用颜色名称 -
background-color: #007BFF;— 推荐使用的十六进制色值（如品牌蓝） -
background-color: rgb(0, 123, 255);— RGB 格式，适合动态调整 -
background-color: hsl(210, 100%, 50%);— HSL 更直观地控制色相、饱和度、亮度
2. 结合其他样式提升容器美观度
单独设置背景色可能显得单调，建议配合以下属性一起使用：
- padding：增加内边距，避免内容贴边
- border-radius：添加圆角，让容器更柔和
- box-shadow：加入阴影，增强立体感
- color：设置文字颜色，确保与背景有足够对比度
.container {
background-color: #007BFF;
color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
3. 考虑可访问性与响应效果
选择背景色时要注意文本的可读性。浅色背景配深色字，深色背景配浅色字。可以使用在线工具检查对比度是否符合 WCAG 标准。
立即学习“前端免费学习笔记（深入）”；
在悬停状态中也可以动态改变背景色，增强交互体验：
.button {
background-color: #007BFF;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #0056b3;
}
基本上就这些。合理使用 background-color，再搭配一些基本样式，就能让容器看起来专业又美观。 
