background-size: cover本身有效，但仅写此属性大概率失效，因容器高度为0；必须配min-height: 100vh、background-position: center center和background-repeat: no-repeat才能确保全屏覆盖且不裁错关键内容。
直接用 background-size: cover 是唯一可靠方式，但只写这一条大概率失效——根本问题不是图片没铺开，而是容器本身高度为 0。
为什么 background-size: cover 看起来没生效
常见现象：图片只显示左上角一小块、被拉伸变形、或上下大片留白。这不是 CSS 写错了，而是容器没有可测量的高度。Bootstrap 的 .container、.row、.col 都不提供默认高度，div 默认按内容撑高，空容器就是 height: 0。
- 必须给目标容器加
min-height: 100vh（推荐）或height: 100vh；height: 100%基本无效，它依赖父级高度，而html和body默认不占满视口 -
min-height: 100vh比height: 100vh更安全：内容超出时不会被截断，也缓解移动端 Safari 地址栏收放导致的闪动 - 别把背景图加在
.container或.row上——它们自带padding和负margin，会缩进实际渲染区域，造成“边缘露白”
必须配齐的三个 CSS 属性
cover 只管缩放逻辑，裁剪锚点和重复行为得手动关掉，否则关键内容（比如人脸、Logo）大概率被切掉或平铺成马赛克。
-
background-size: cover：等比缩放，确保至少一边撑满容器，多余部分裁剪 -
background-position: center center：比只写center更明确，水平+垂直都居中，避免裁剪偏移 -
background-repeat: no-repeat：不加这句，小图会横向纵向无限平铺
可以合并简写：background: url('bg.jpg') no-repeat center/cover;
Bootstrap 5 中怎么加才不踩坑
Bootstrap 5 的 .bg-* 工具类（如 .bg-dark）只设纯色背景，不支持图片。任何试图用 class="bg-image" 或 class="bg-dark bg-cover" 的写法都会失效。
- 新建自定义 class，比如
.hero-bg，在 CSS 文件里定义完整规则，便于响应式调整和维护 - 路径用相对路径（如
../img/bg.jpg），避免上线后 404；若用 Webpack/Vite，确认图片放在public目录下 - 加降级色：
background-color: #f8f9fa;，防止图片加载失败时页面一片空白 - 移动端注意：iOS Safari 对
background-attachment: fixed支持差，滚动卡顿，不要用
响应式断点下容易忽略的错位问题
同一张图在手机竖屏和桌面横屏下，宽高比差异大。background-position: center center 在不同尺寸下裁剪区域可能完全不同——人脸在小屏居中，大屏可能只剩半张脸。
- 在
@media查询里重置background-position，例如：@media (min-width: 768px) { .hero-bg { background-position: center 30%; } } - 如果关键内容靠上（比如 Logo），用
center top；靠下就用center bottom，比死守center center更可控 - 别依赖
background-size: 100% 100%强制拉伸——它必失真，人像变胖、文字糊成色块是确定结果，不是概率问题
最麻烦的从来不是怎么写 CSS，而是“全屏”在不同设备上根本不是同一个概念：Safari 的 dvh、Android 滚动条侵占、折叠屏动态视口……这些细节不验证到真机，上线后第一眼就会翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
