background-image 怎么用 background-repeat 和 background-size 控制
直接设 background-repeat: no-repeat 只能停掉平铺，但图片默认按原尺寸显示，留白或拉伸都可能发生。真正要“不重复 + 覆盖”，必须配 background-size: cover 或 background-size: 100% 100%，二者行为不同：cover 保持宽高比、填满容器（可能裁剪），100% 100% 强制拉伸（可能变形）。
-
background-repeat: no-repeat单独用没用，它不解决尺寸问题 -
background-size: cover是最常用选择，尤其用于 banner 区域 - 如果容器高度不确定（比如响应式
div），cover仍生效，但需确保父容器有明确高度或min-height - Bootstrap 本身不封装这个逻辑，得自己写 CSS 覆盖
在 Bootstrap 类里怎么加自定义背景样式
Bootstrap 的 .bg-* 类（如 .bg-light）只设纯色背景，不支持图片。想用图片，只能额外加 class 或内联 style。推荐新建一个 class，避免污染全局或破坏响应式结构。
- 别写
style="background-image: url(...) no-repeat cover"—— 内联样式难维护，且无法响应式调整 - 写独立 class，比如
.bg-cover-img，然后在 CSS 中定义background-repeat和background-size - 路径建议用相对路径，避免上线后 404；若用 Bootstrap 5.3+，注意其
url()解析依赖构建工具（如 Vite/Webpack）的 public 目录规则 - 如果图片来自 CDN，确保 URL 可跨域访问，否则控制台报
CORS policy错误，背景空白
为什么设置了 cover 还是没覆盖全？常见原因
不是代码写错，而是容器或层级出了问题。最常见的三个卡点：容器没高度、父元素 overflow 隐藏、背景图被其他元素遮挡。
- 容器本身
height: auto且无内容时，高度为 0 —— 必须显式设min-height或height（如min-height: 100vh） - 父容器有
overflow: hidden，而背景图超出部分被裁掉 —— 检查祖先元素的 overflow 设置 - 用了
.position-relative+ 子元素绝对定位，结果子元素盖住了背景 —— 背景属于父容器，z-index 不影响它，但视觉上会被遮 - Bootstrap 的
.container默认有左右 padding，导致背景图在容器内居中显示却“看起来没铺满”—— 实际是 padding 留白，不是背景问题
要不要用 Bootstrap 的 utility 类组合实现？
不能。Bootstrap 5.x 的背景相关 utility（如 .bg-opacity-*、.bg-gradient）都不支持 background-image。它的 .bg-* 系列只生成 background-color 值。哪怕你写 class="bg-dark bg-cover-img"，也必须自己定义 .bg-cover-img，否则无效。
- 不要试图用多个 Bootstrap class 拼出背景图效果 —— 它们互斥且不叠加
- 如果项目已用 Sass，可以在
_custom.scss里 extendbg-*逻辑，但仍是自定义实现 - 移动端要注意：某些安卓 WebView 对
background-size: cover渲染不准，可加background-attachment: scroll避免意外固定滚动
真正容易被忽略的是容器高度来源和图片加载时机 —— 背景图不会触发 reflow，所以即使图片还没加载完，容器也可能已经渲染成 0 高度。加 min-height 是底线，别指望图片自动撑开区域。
