看到background-size: cover没生效，很多人第一反应可能是“CSS写错了吧”。但大概率不是代码的问题，而是容器本身的高度为零。html和body默认不占满视口，div也按内容撑高。你看到的“只显示左上角”或“被拉伸”，其实是图片在高度为零的容器里强行渲染的结果。
background-size: cover 为什么没生效
说到底，是高度继承链断了。几个关键点需要注意：
- 必须显式设置
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，两者叠加后，背景图实际渲染区域就缩进去了，边缘自然“露白”。
- 直接一点：全屏背景区域直接用
，不套.container或.row - 非要嵌套：给父容器加
mx-n3 px-0（抵消.row的 -1rem margin 和.container的 padding） - 给
.hero-section自己设min-height: 100vh+background-size: cover+background-position: center - 别忘了检查祖先元素有没有
overflow: hidden—— 它会把超出部分直接裁掉，看起来像“图被切了”
移动端 Safari 背景图闪烁、裁切或不显示
iOS Safari 对 background-attachment: fixed 的支持问题由来已久，滚动时重绘掉帧是常事。更隐蔽的是，地址栏收起/弹出会改变 100vh 的计算值，导致背景短暂留白或裁顶。
- 绝对不要用
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(...)提供降级色
路径 404、CORS 或 fallback 不生效
背景图一片空白，90% 是加载环节出了问题：路径解析错误、CDN权限拒绝、或CSS fallback写法不对。浏览器不会报错，只会静默忽略失败的 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()，保留前面的颜色
真正卡住人的从来不是 background-size: cover 这一行代码，而是高度继承链断裂、栅格干扰、移动端视口单位失准、以及加载失败时毫无提示的静默空白——这些点漏掉任何一个，全屏效果就垮一半。
