使用background-color设置背景色，如#f0f0f0；2. 用background-image添加图片并可设no-repeat；3. 通过background简写属性同时设置颜色、图片、位置等；4. 配合background-size、position、attachment等控制显示效果，提升页面视觉层次与兼容性。
在CSS中设置背景图片与背景颜色，可以通过 background 或更具体的 background-image 和 background-color 属性来实现。你可以单独设置，也可以组合使用。
1. 单独设置背景颜色
使用 background-color 可以为元素设置纯色背景：background-color: #f0f0f0;
常用值包括十六进制（如 #ff0000）、RGB（如 rgb(255, 0, 0)）、颜色名称（如 red）等。
2. 单独设置背景图片
使用 background-image 添加图片背景：background-image: url('bg.jpg');
立即学习“前端免费学习笔记（深入）”；
如果不需要背景图重复，可以加上：
background-repeat: no-repeat;
3. 同时设置背景图片和背景颜色
当图片加载失败或未完全覆盖时，背景颜色可作为备用显示：直接使用 background 简写属性：
background: #e0e0e0 url('bg.png') no-repeat center center;
这段代码设置了：
- 背景颜色为 #e0e0e0
- 背景图片来自 bg.png
- 图片不重复
- 居中对齐并铺满容器（可通过 background-size 调整）
4. 控制背景图的显示效果
常用辅助属性提升视觉效果：background-size: cover; —— 图片覆盖整个容器，保持比例
background-size: 100% 100%; —— 拉伸填满（可能变形）
background-position: center; —— 定位图片位置
background-attachment: fixed; —— 背景固定，滚动时图片不动（常用于视差效果）
基本上就这些。合理搭配背景颜色和图片，能增强页面层次感，同时保证在图片未加载时也有良好显示效果。
