background-size: cover未生效主因是父容器高度为0；需设min-height: 100vh、避免套用限制宽度的.container，并确保元素真正占满视口。
background-size: cover 为什么没让图片铺满整个屏幕
直接写 background-size: cover 不生效，大概率是因为父容器高度为 0。Bootstrap 默认的 <div class="container"> 或 <code><div class="row"> 不会自动撑开高度，背景图自然“看不见”。必须确保应用背景的元素有明确的高度，比如设为视口高度。
<ul>
<li>给目标元素加 <code>min-height: 100vh（不是 height: 100vh，避免内容超长时被截断）
.container 默认有左右 padding）<header></header> 或自定义 <section></section> 上，建议脱离 Bootstrap 容器流：不套 .container，或改用 .container-fluid
Bootstrap 5 中推荐的全屏背景写法
Bootstrap 5 已移除自带的 bg-*<code> 工具类对背景图的支持，得手写 CSS。最简可控的方式是定义一个自定义类，配合 <code>cover 和 center/center 定位：
.hero-bg {
background-image: url('hero.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
min-height: 100vh;
}
然后在 HTML 中直接使用：
<section class="hero-bg">
<div class="container d-flex align-items-center h-100">
<h1>欢迎</h1>
</div>
</section>
-
h-100让内部.container占满父容器高度，方便垂直居中 - 避免把背景写在
.container上——它默认最大宽度 1140px，左右留白，cover 会拉伸但视觉上仍是“中间一块” - 如果要响应式适配，可加
@media (max-width: 768px) { .hero-bg { background-attachment: scroll; } }防止移动端卡顿
background-attachment: fixed 导致滚动错位怎么办
加了 fixed 想做视差效果，但在 iOS Safari 或部分安卓浏览器里，背景会“撕裂”或随滚动跳动。这不是 Bootstrap 的问题，而是 background-attachment: fixed 在移动端兼容性差且性能低。
立即学习“前端免费学习笔记（深入）”；
- 优先去掉
fixed，用纯cover+center更稳妥 - 真需要视差，改用 JS 库（如
scrollama）或 CSStransform: translateY()配合滚动监听 - 若坚持用
fixed，务必加background-color作降级色，防止图片加载失败时露白
图片加载慢导致背景闪白或错位
尤其在首次访问或弱网环境下，background-image 加载滞后，用户会先看到空白或 fallback 色块。
- 提前预加载：在
中加<link rel="preload" as="image" href="hero.jpg"> - 用内联 base64 占位小图（仅适用于 ≤2KB 的 loading 图）
- 在 JS 中监听
img元素加载完成再添加背景类，比纯 CSS 更可控 - 慎用 SVG 作为背景图——某些旧版 Bootstrap（如 v4.6）对 SVG 的
cover渲染支持不稳定
cover 不管用，而是它作用在了一个高度为 auto 的空 div 上。
