Bootstrap背景图全屏覆盖 background-size:cover实现方法

看到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 这一行代码，而是高度继承链断裂、栅格干扰、移动端视口单位失准、以及加载失败时毫无提示的静默空白——这些点漏掉任何一个，全屏效果就垮一半。