要使Bootstrap Row背景图正常显示且铺满，必须设置min-height（如400px）、background-size: cover、background-origin: border-box和no-repeat，并确保父容器无overflow: hidden干扰。
Bootstrap Row 背景图怎么设才不会留白
直接给 .row 加 background-image 通常无效——因为 .row 默认是 display: flex，且高度塌陷（没有内容或显式高度时高为 0），背景图根本没地方显示。必须确保容器有明确的尺寸和正确的盒模型行为。
- 别只写
background-image，必须配background-size: cover或100% 100%才能铺满 -
.row默认不占高度，得用min-height或height拉伸（比如min-height: 400px） - 避免用
padding撑高，它不触发背景渲染区域扩展；优先用min-height+background-attachment: fixed（可选） - 如果父容器（如
.container）有overflow: hidden，可能裁剪背景图边缘，检查并移除
为什么加了 background-size: cover 还是不铺满
常见原因是背景图渲染区域被限制在 .row 的“内容盒”内，而 Bootstrap 的 .row 默认有负外边距（margin-left: -15px; margin-right: -15px），但背景不会自动延伸到那部分。更关键的是：背景图默认只渲染在 padding-box 区域，不是 border-box。
- 强制背景扩展到边框：加
background-origin: border-box - 确保无干扰的
background-repeat：显式设为no-repeat，否则小图会平铺出奇怪效果 - 若用了
container-fluid，检查是否漏掉width: 100%——某些旧版 Bootstrap 行为下.row可能未占满 - Chrome DevTools 里选中元素，看“Computed”面板里的
background-size是否真生效，有时 CSS 优先级被覆盖
如何让背景图随滚动自然移动（非固定）
默认就是随滚动移动的，但如果误加了 background-attachment: fixed，就会变成视差效果——这常被当成“铺不满”的错觉，其实图在那儿，只是位置不动了。
- 确认没写
background-attachment: fixed，除非你真要视差效果 - 想实现平滑滚动适配？加
background-position: center center配合cover更稳 - 移动端要注意：iOS Safari 对
fixed背景支持不稳定，即使写了也可能失效，优先用默认滚动行为 - 如果图太小，
cover会拉伸变形；图太大则可能裁切——准备一张宽高比接近容器预期比例的图（比如 16:9）
兼容性与性能注意点
所有现代浏览器都支持 background-size: cover，但 IE9+ 才支持（IE8 不支持，若需兼容得用 polyfill 或降级方案）。性能上，大图会阻塞渲染，尤其首屏。
- 图片务必压缩：用 WebP 格式，配合
srcset做响应式图源（虽然这里不是<img>，但可配合 JS 切换 class 加载不同尺寸图） - 避免在多个
.row上重复用同一张大图，CSS 不会复用缓存——改用 CSS 变量或单独 class 统一管理 - Bootstrap 5 中
.row是 flex 容器，若内部列用flex: 1占满，可能导致行高度动态变化，此时min-height比height更安全 - 调试时临时加
outline: 1px solid red看.row实际渲染区域，比靠猜靠谱
.row 设高度、或者被父容器的 overflow 或 padding 悄悄截掉了背景边缘。多开 DevTools 看 computed styles，比反复改 CSS 猜更快。
