background-size: cover需配合min-height: 100vh、background-position: center center、background-repeat: no-repeat四者缺一不可；失效主因是容器无高度，如body空内容、flex塌陷或未设html/body高度。
直接说结论：用 background-size: cover + min-height: 100vh + background-position: center center + background-repeat: no-repeat 四件套，缺一不可。
为什么 background-size: cover 看起来没铺满？
不是属性失效，是容器本身没高度。常见于：body 下空内容、div 没设高、或被 Bootstrap 的 .row/.col flex 布局塌陷。
-
min-height: 100vh是底线，别用height: 100vh—— iOS Safari 地址栏收放会动态改视口高度，导致背景跳动或截断 - 如果父容器是
display: flex，子元素必须显式设min-height: 100%或flex: 1，否则 flex 容器默认不撑高 -
background-attachment: fixed会加剧 Safari 滚动卡顿，且在部分安卓 WebView 中表现异常，非必要不加
cover 和 100% 100% 到底该选哪个？
cover 等比缩放后裁边；100% 100% 强制拉伸，必然失真。选哪个取决于设计需求：
- Banner 类全屏图：优先
cover，但必须配background-position: center center，否则人脸可能偏到左上角被切掉 - 信息图/示意图类：若关键内容占满整图（无留白），且允许轻微变形，
background-size: 100% 100%反而更可控 - 绝对不能混用：
background-size: cover+background-position: top left= 关键内容大概率消失
移动端图片太大怎么办？
5MB 的 4K 图在 3G 网络下加载超 10 秒，但用媒体查询换图又容易漏写 background-repeat 导致重复平铺。
立即学习“前端免费学习笔记（深入）”；
- 必须为每个断点重写完整背景声明，不能只覆盖
background-image：
.hero-bg {
background-image: url('bg-mobile.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media (min-width: 768px) {
.hero-bg {
background-image: url('bg-tablet.jpg');
}
}
@media (min-width: 992px) {
.hero-bg {
background-image: url('bg-desktop.jpg');
}
}
url(bg.jpg) 在某些旧版 Safari 里会解析失败d-none d-md-block 控制背景图——它删的是整个 DOM 节点，不是换图真正难的不是写对这四行 CSS，而是图片本身宽高比是否接近 16:9 或 4:3；再好的 cover 也救不了竖构图人像塞进横屏 banner 里——这时候得靠设计师提前裁好，而不是前端硬扛。
