本文详解如何通过 CSS 正确设置全页背景图，解决图片“被裁剪”“缩放失真”或“显示不全”等问题，涵盖 background-size 的核心取值（cover、contain、100% 100%）及实际应用建议。
本文详解如何通过 css 正确设置全页背景图，解决图片“被裁剪”“缩放失真”或“显示不全”等问题，涵盖 `background-size` 的核心取值（`cover`、`contain`、`100% 100%`）及实际应用建议。
在构建现代响应式落地页时，全屏背景图（Full-page Background Image）是提升视觉冲击力的关键手段。但许多开发者会遇到类似问题：明明已指定 background-size: cover，图片却仍“过度放大”“边缘被裁”或“未铺满视口”——这往往不是图片尺寸问题（如用 Paint 缩至 1200px），而是 CSS 背景行为理解偏差所致。
关键在于明确 background-size 各值的语义差异：
- cover：等比缩放图片，使其完全覆盖容器（可能裁剪部分内容），适用于强调视觉氛围、允许适度裁剪的场景；
- contain：等比缩放图片，使其完整可见于容器内（可能留白），适合需展示全图细节的场合；
- 100% 100%：强制拉伸图片填满容器宽高，忽略原始宽高比，易导致形变，慎用；
- auto 100% 或 100% auto：单向拉伸，常用于横幅类设计。
你当前的代码：
.background-image {
background-image: url(images/chad-montano-eeqbbemH9-c-unsplash.jpg);
background-size: cover; /* ✅ 正确选择，但需配合其他属性 */
height: 100vh;
background-position: center;
}逻辑本身合理，但若仍出现“过度缩放”，常见原因有：
- 父容器高度未继承：确保 .background-image 的父元素（如 <body>）无 margin/padding 干扰，且 html, body { height: 100%; } 已声明；
- 图片原始比例与视口差异过大：例如竖构图原图用于横屏全屏，cover 必然裁剪顶部/底部。此时可微调 background-position（如 center top）或改用 background-size: auto 100% 配合 background-repeat: no-repeat；
- 未禁用重复：务必添加 background-repeat: no-repeat，否则小图会平铺。
✅ 推荐的健壮写法（兼顾兼容性与语义）：
.background-image {
background-image: url(images/chad-montano-eeqbbemH9-c-unsplash.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed; /* 可选：实现视差滚动效果 */
height: 100vh;
margin: 0; /* 防止 body 默认外边距影响 */
}⚠️ 注意事项：
- 不要依赖图像编辑软件（如 MS Paint）预缩放图片——浏览器能高效处理高清原图（推荐 WebP 格式 + <picture> 响应式方案）；
- 移动端需额外测试：100vh 在部分 iOS Safari 中存在视口高度计算异常，可考虑 min-height: 100vh 或 JavaScript 动态修正；
- 为无障碍考虑，避免纯背景图承载关键信息；重要文案应置于 HTML 内容中（如你的 <h1> 和 <p>），而非写在图片上。
总结：全屏背景的本质是容器尺寸控制 + 背景渲染策略协同。优先使用 cover + center 组合，辅以 no-repeat 和 100vh 高度，再根据实际视觉反馈微调 background-position，即可稳定实现专业级全页背景效果。
