响应式背景图需根据设计目标选择background-size属性，cover使图像覆盖容器但可能裁剪，适合全屏背景；contain确保图像完整显示但可能留白，适用于Logo等需完整呈现的场景。
在网页设计中，响应式背景图是提升用户体验的重要部分。使用CSS可以轻松实现背景图随屏幕尺寸变化自动调整大小，cover 和 contain 是两个最常用的属性值，适用于不同场景。
理解 background-size: cover
cover 会让背景图缩放以完全覆盖容器，保持图像宽高比，可能会裁剪部分内容。
适用场景：全屏背景、英雄区域（hero section）等需要视觉冲击力的地方。基本写法：
.hero {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 100vh;
}
这样无论设备屏幕如何变化，背景图都会填满整个区域，不会留白，但图片边缘可能被裁掉。
立即学习“前端免费学习笔记（深入）”；
理解 background-size: contain
contain 会缩放背景图，使其完整显示在容器内，保持宽高比，可能会留下空白区域。
示例代码：
.logo-container {
background-image: url('logo.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
width: 100%;
height: 200px;
}
图片会完整显示，如果容器比例与图片不一致，周围会出现空白，适合强调图像完整性。
响应式中的实际应用技巧
为了让背景图在不同设备上表现更好，建议结合媒体查询和视口单位优化体验。
- 始终设置 background-position: center，确保关键内容居中可见
- 对移动设备可切换背景图尺寸或使用不同图片
- 用 background-attachment: fixed 制造视差效果（谨慎使用，影响性能）
- 为低分辨率设备提供适配图，避免加载过大资源
cover 与 contain 的选择建议
选择哪个取决于设计目标：
- 要背景“撑满”整个区域，不在乎裁剪？用 cover
- 要图像“完整显示”，允许有空白？用 contain
- 移动端小屏优先考虑 contain 避免关键内容被裁
- 桌面端大图氛围营造推荐 cover
