合理使用 background-color 和 background-image 可提升网页视觉效果与可读性。首先设置背景颜色，如用 #f0f0f0 作衬底色；再添加背景图片，通过 url('bg.jpg') 引入图像，默认平铺填充。建议同时定义背景色作为图片加载失败时的备用方案。配合 background-repeat: no-repeat 防止重复，background-position: center 居中对齐，background-size: cover 覆盖容器，background-attachment: fixed 实现视差滚动。典型应用如首页横幅：.hero 设置全屏背景图并保留深灰底色，确保美观与兼容性。掌握这些基础属性组合，能高效实现常见背景需求，同时需注意路径正确、图片性能优化等细节问题。
在网页设计中，背景是提升视觉效果的重要部分。CSS 提供了多个背景属性，其中 background-color 和 background-image 是最常用的基础属性。合理使用它们可以增强页面的可读性和美观性。
设置背景颜色（background-color）
background-color 用于定义元素的背景颜色。它可以应用于任何块级或行内元素，比如 div、p、body 等。
常见用法包括：
- 使用颜色名称：如 red、blue、green
- 使用十六进制值：如 #ff0000（红色）、#00ff00（绿色）
- 使用 RGB 值：如 rgb(255, 0, 0)
- 使用透明度：如 rgba(0, 0, 0, 0.5) 实现半透明黑色背景
示例代码：
立即学习“前端免费学习笔记（深入）”；
div {
background-color: #f0f0f0;
}
这会让 div 的背景变为浅灰色，适合用作文本区域的衬底色，提高可读性。
添加背景图片（background-image）
background-image 用于为元素设置背景图像。默认情况下，图片会平铺（重复）填满整个元素区域。
基本语法：
div {
background-image: url('bg.jpg');
}
这里 url() 括号内填写图片路径，可以是相对路径或绝对 URL。
常见问题与建议：
- 确保图片路径正确，否则背景不会显示
- 大图可能导致加载慢，建议压缩或使用合适尺寸
- 若图片较小，默认会重复，可通过 background-repeat 控制
结合使用背景颜色和图片
即使设置了背景图片，也建议同时指定 background-color。这样在图片未加载完成或路径错误时，页面仍有合理的背景色作为备用。
示例：
header {
background-image: url('pattern.png');
background-color: #333;
}
如果 pattern.png 加载失败，header 仍会显示深灰色背景，避免文字直接暴露在白底上影响阅读。
控制背景图片的显示方式
单独使用 background-image 往往不够，通常配合其他属性优化显示效果：
- background-repeat: no-repeat; 防止图片重复
- background-position: center; 将图片居中对齐
- background-size: cover; 让图片覆盖整个容器（常用于全屏背景）
- background-attachment: fixed; 实现视差滚动效果
完整示例：
.hero {
background-image: url('hero-bg.jpg');
background-color: #222;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 100vh;
}
这个设置常用于首页横幅区域，视觉冲击力强且适配不同屏幕。
基本上就这些。掌握 background-color 和 background-image 的搭配使用，再辅以控制属性，就能实现大多数常见的背景需求。不复杂但容易忽略细节，比如备用色和图片性能优化。
