background-size: cover 未生效的根本原因是容器高度为0，需设置html、body{height:100%}，目标容器用min-height:100vh并配background-position:center center，同时排查栅格留白、overflow隐藏、safari视口变化及图片加载失败等问题。
background-size: cover 为什么没生效
根本不是 CSS 写错了，而是容器高度为 0 —— html 和 body 默认不占满视口，div 也默认按内容撑高。你看到的“只显示左上角”或“被拉伸”，其实是图片在高度为 0 的容器里强行渲染的结果。
- 必须显式设置
html, body { height: 100%; }，否则height: 100vh在嵌套场景下也可能失效 - 目标容器（比如
.hero）要用min-height: 100vh，不是height: 100vh，避免内容超出时被截断 -
background-size: cover必须配background-position: center center，否则裁剪中心偏移，人脸或重点区域可能直接被切掉 - Bootstrap 5 的
.bg-*类只设纯色，不支持背景图；别写class="bg-dark bg-image"期望自动叠加，它不会生效
container-fluid 或 .row 里加背景图总留白
不是路径错、也不是图片小，是 Bootstrap 栅格自带的 padding 和 margin 在捣鬼。.container-fluid 默认有 padding-left/padding-right，.row 有负 margin，两者叠加后，背景图实际渲染区域缩进，边缘就“露白”了。
- 绕开栅格：全屏背景区域直接用
<div class="hero-section">，不套 <code>.container或.row - 非要嵌套：给父容器加
mx-n3 px-0（抵消.row的 -1rem margin 和.container的 padding） -
.hero-section自己设min-height: 100vh+background-size: cover+background-position: center - 检查祖先元素有没有
overflow: hidden—— 它会把超出部分直接裁掉，看起来像“图被切了” - 绝对不要用
background-attachment: fixed做全屏背景，改用 JS 滚动监听 +transform: translateY()实现视差（如需） - 用
min-height: 100vh替代height: 100vh，再配合height: 100%兜底，缓解地址栏跳变 - 现代浏览器可用
height: 100dvh（dynamic viewport height），它响应地址栏变化，但注意兼容性 - 图片尺寸别超 1920×1080，优先用 WebP 格式；加载失败时，用
background-image: #222, url(...)提供降级色 - 路径别用
../img/bg.jpg这类相对路径 —— CSS 中的url()是相对于 CSS 文件位置，不是 HTML；优先用绝对路径或构建工具支持的别名（如~/assets/bg.jpg） - 检查 DevTools 的
Network标签页，确认图片返回状态码是200，不是404或403 - CORS 错误会导致背景空白，控制台报
Access to image ... from origin ... has been blocked；CDN 需开启Access-Control-Allow-Origin: * - fallback 写法必须是
background-image: #f8f9fa, url(./bg.jpg);—— 多个值用逗号分隔，浏览器自动忽略失败的url()，保留前面的颜色
移动端 Safari 背景图闪烁、裁切或不显示
iOS Safari 对 background-attachment: fixed 支持差，滚动时重绘掉帧；更隐蔽的是，地址栏收起/弹出会改变 100vh 的计算值，导致背景短暂留白或裁顶。
路径 404、CORS 或 fallback 不生效
背景图空白，90% 是加载环节出问题：路径解析错、CDN 权限拒绝、或 CSS fallback 写法不对。浏览器不会报错，只会静默忽略失败的 url()。
真正卡住人的从来不是 background-size: cover 这一行代码，而是高度继承链断裂、栅格干扰、移动端视口单位失准、以及加载失败时毫无提示的静默空白——这些点漏掉任何一个，全屏效果就垮一半。
