要让background-image撑满整个视口，必须组合设置background-size: cover、background-position: center center、background-repeat: no-repeat，并确保容器min-height: 100vh且无默认margin/padding。
background-image 怎么写才能撑满整个视口
直接用 background-image 默认不会全屏覆盖，它默认平铺、不缩放、以元素内容区左上角为起点定位。要让图片真正“全屏”，必须同时控制尺寸、定位和缩放行为。
关键不是加一张图，而是组合四个 CSS 属性：
-
background-size: cover—— 等比缩放至完全覆盖容器（可能裁剪） -
background-position: center center—— 居中对齐，避免偏移 -
background-repeat: no-repeat—— 关闭平铺，否则小图会重复出现 -
background-attachment: fixed（可选）—— 实现视差效果；若要滚动时背景随内容动，就别加这行
Bootstrap 5 中 class 写法是否支持
Bootstrap 5 的 utility classes 不提供 background-size 或 background-attachment 的封装，bg-* 系列（如 bg-primary）只设颜色，不处理图片。所以不能只靠 class="bg-image" 这类写法生效。
你必须自己写 CSS，或者用内联 style（仅限简单调试）：
<div class="hero" style="background-image: url('/img/hero.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 100vh;"></div>
更推荐抽成 class：
.bg-fullscreen {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #000; /* 防止图片加载前白屏 */
}
height: 100vh 和 min-height: 100vh 的区别
用 height: 100vh 会让容器严格等于视口高度，但如果内容超出，就会被截断或溢出；而 min-height: 100vh 允许容器随内容自然增高，更安全。
常见错误是只设 height: 100vh，结果页面有导航栏或 footer，导致底部被遮住。正确做法：
- 如果只是首屏横幅（hero section），用
min-height: 100vh - 如果要绝对填满且禁止滚动，才用
height: 100vh; overflow: hidden - 记得给父容器（比如
）也检查 margin/padding，否则可能留白
图片加载失败或路径错误时怎么办
浏览器不会报错，只会静默回退到背景色（或透明），导致页面看起来“没图”。排查顺序很关键：
- 打开开发者工具 → Elements → 找到该元素 → 看 computed tab 下
background-image是否解析成有效 URL（注意相对路径是否相对于当前 HTML 文件） - 把图片 URL 直接粘贴进地址栏，确认能访问（尤其注意 public/ 与 src/ 的区别，Vite/Webpack 等构建工具对静态资源路径处理不同）
- 加一层
background-color作为 fallback，比如深灰：background-color: #1a1a1a - 不要依赖
!important强行覆盖 Bootstrap 的background-color，先查 specificity，用更具体的 selector 更稳妥
实际最常被忽略的是：图片本身分辨率不够，cover 模式下会被拉伸模糊；或者在移动端 viewport 缩放后，100vh 行为异常（Safari iOS 有已知问题），这时得用 JS 动态设高度或改用 100dvh（但注意兼容性）。
