background-size: cover 未生效主因是父容器高度为0，需设html和body高100%、目标容器min-height: 100vh，并配background-position: center；Bootstrap 5需自写CSS实现背景图，注意路径、降级色和移动端渲染优化。
background-size: cover 为什么没生效
常见现象是图片只显示左上角一小块，或被拉伸变形，根本没“全屏覆盖”。核心原因不是 CSS 写错了，而是父容器高度为 0 —— body 和 html 默认不占满视口，div 也默认按内容撑高。
实操建议：
- 必须显式设置
html和body高度为100%，否则height: 100vh在某些嵌套场景下也会失效 - 目标容器（比如
.hero）要用min-height: 100vh，而不是height: 100vh，避免内容超出时被截断 -
background-size: cover要配合background-position: center center，否则居中偏移容易被忽略
Bootstrap 5 中用 utility class 快速实现
Bootstrap 5 自带的 bg-* 类不支持背景图，得自己写 CSS；但它的间距、响应式和 flex 工具能大幅简化布局。别试图用 bg-image 这类不存在的 class。
实操建议：
- 给容器加
position-relative，方便后续叠加文字或按钮 - 用
d-flex align-items-center justify-content-center居中内部内容，比纯 CSSflex更稳 - 响应式断点要同步控制背景图尺寸：比如在
sm下改用background-size: contain防止小图被裁太多
图片加载失败时的降级处理
用户网络差、路径写错、CDN 返回 404，都会导致背景图空白——而页面其他部分照常渲染，显得突兀。这不是 Bootstrap 的问题，但线上常被忽略。
实操建议：
- 用
background-image叠加两层：先写纯色（如#222），再写url(...)，浏览器会自动忽略失败的 url - 路径别用相对路径如
../img/bg.jpg，优先用绝对路径或 Bootstrap 的~别名（如果配了 webpack） - 检查浏览器 DevTools 的 Network 标签页，确认返回状态码是
200，而不是404或403
移动端 Safari 滚动时背景图闪烁或卡顿
iOS Safari 对 background-attachment: fixed 支持差，且在滚动时重绘背景图容易掉帧。即使你没写 fixed，某些 transform 或 will-change 也会触发类似行为。
实操建议：
- 绝对不要用
background-attachment: fixed实现视差效果，改用 JS 滚动监听 +transform: translateY()更可控 - 加
-webkit-transform: translateZ(0)强制硬件加速，但仅限必要元素，多了反而增加内存压力 - 图片尺寸别超过 1920×1080，WebP 格式比 JPG 小 30% 以上，对首屏加载速度影响明显
背景图全屏这事，表面是 CSS 一行代码，实际卡点全在容器高度继承链、路径解析时机和移动端渲染策略上。最容易漏的是 html { height: 100% } 这一句，一漏就全白忙。
