background-image 怎么不重复铺满整个页面
直接用 background-repeat: no-repeat 只能停在元素默认尺寸里，不是“不重复”，而是“不重复但也不撑开”——你看到的空白，其实是 <body> 高度没填满视口导致的。
关键不是关掉重复，而是让背景图「覆盖全屏」且「只显示一次」：
-
background-size: cover：等比缩放填满容器，可能裁剪边缘 -
background-attachment: fixed（可选）：滚动时背景不动，增强全屏感 - 必须确保
<html>和<body>高度为 100%，否则背景图只画在内容高度范围内
常见错误是只设了 body，漏了 html：
html, body {
height: 100%;
margin: 0;
}
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}为什么 background-size: 100% 100% 不推荐
它会强行拉伸图片填满，彻底破坏宽高比，人像变形、文字模糊，尤其在响应式场景下更明显。
立即学习“前端免费学习笔记（深入）”；
cover 和 contain 是语义明确的缩放策略，浏览器原生支持，性能好、兼容性稳（IE9+）。
-
cover：优先保证填满，允许裁剪 -
contain：优先保证完整，允许留白 -
100% 100%：无脑拉伸，没有语义，后期维护难判断意图
移动端全屏背景图经常被截断？检查 viewport 和 overflow
iOS Safari 和部分安卓 WebView 会把 <body> 当作“可滚动区域”，哪怕内容很少，也会产生隐式滚动条，导致背景图错位或底部露白。
- 加
viewport元标签：<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁用多余滚动：
body { overflow-x: hidden; }（慎用overflow-y: hidden，会锁死页面滚动） - 避免给
body设固定height，改用min-height: 100vh更稳妥
background-image 加载失败时怎么兜底
网络慢、路径错、CORS 限制都可能导致背景图白屏。纯 CSS 没法捕获加载失败，但可以靠叠加色值和降级策略减少突兀感：
- 先设一个安全背景色：
background-color: #2c3e50，再叠图片 - 用
background-image多值语法，后写的会盖在前面（但注意兼容性，IE 不支持）：background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("bg.jpg") - 真正要监控加载状态，得用 JS +
Image对象，但那是另一层复杂度了
全屏背景图看着简单，实际卡点都在高度继承、缩放语义、移动端视口行为这些细节上，调的时候别只盯着 background-* 属性本身。
