background-size: cover 是实现背景图全屏显示最稳妥的方式，它等比缩放并裁剪以覆盖容器，需配合 height: 100vh、background-position: center center 使用，并注意父容器限制与移动端兼容性问题。
用 background-size: cover 是最稳的起点
绝大多数情况下，你不需要让背景图“拉伸变形”填满整个屏幕，而是希望它保持比例、居中显示、同时覆盖整个视口——cover 就是为此而生的。它会等比缩放图片，确保宽高至少有一个撑满容器，多余部分自动裁剪。
常见错误现象：只写 background-size: 100% 100%，结果图片被强行拉宽压扁，人像变胖、文字变形；或者用 contain，导致四周留白，根本没“全屏”。
-
background-size: cover必须配合height: 100vh（不是100%）才能真正撑满视口高度 - 记得加
background-position: center center，否则图片可能偏左上角，裁剪区域不对 - 如果页面有滚动条，且你不希望背景随内容滚动，就加
background-attachment: fixed；但注意 iOS Safari 对fixed支持不稳定，慎用
为什么不能只靠 width: 100%; height: 100%？
因为 100% 是相对父元素计算的，而 html 和 body 默认高度不占满视口——它们的高度由内容撑开。所以即使你给 body 写了 height: 100%，若没同步设 html { height: 100%; }，它还是无效。
更直接的办法是跳过百分比，用视口单位：
- 对
body或目标容器，直接写height: 100vh—— 它不依赖父级，天生就是视口高度 - 如果背景图设在
div上（比如登录页大图区），同样要确保该div的父容器没有overflow: hidden或意外padding，否则100vh会被截断 - 移动端 Safari 有时会把地址栏高度算进
vh，导致底部短暂空白；可临时用min-height: 100vh缓解
用 <img> 标签代替背景图？小心 z-index 和文档流
有些场景（比如需要响应式 srcset、SEO 图片语义、或 JS 动态换图）必须用 <img>。这时想让它“全屏”，就不能只靠 CSS 背景那一套了。
典型翻车点：把 <img> 放进 Bootstrap 的 .container 里，结果被栅格限制宽度；或者加了 position: absolute 却忘了设 top: 0; left: 0; z-index: -1，导致盖不住内容或被其他元素遮挡。
- 推荐结构：
<div class="full-bg"><img src="..." alt=""></div>，然后对.full-bg设position: relative; height: 100vh; overflow: hidden -
<img>本身设position: absolute; top: 50%; left: 50%; width: auto; height: 100%; max-width: none;，再用transform: translate(-50%, -50%)居中，比object-fit: cover兼容性更好（IE11 都支持） - 别漏掉
img { display: block; }，否则底部可能多出几像素空白
Bootstrap 5 下特别要注意的兼容细节
Bootstrap 5 已移除 jQuery 依赖，但它的实用类（如 .bg-dark）不会帮你处理背景图尺寸。你仍得自己写 CSS，且要留意默认样式干扰。
比如 .container 有左右 padding，.row 有负 margin —— 如果你把背景图写在 .container 上，实际可视区域就窄了；如果写在 body 上，又容易被 navbar 或 footer 的 margin 拉出滚动条。
- 最干净的做法：单独建一个全宽全高的
<div class="hero-bg">，放在<body>最外层，再用z-index控制层级 - 务必加
body { margin: 0; }和html { scroll-behavior: smooth; }（可选），避免默认边距和跳动 - 如果用了
background-attachment: fixed，在部分安卓 WebView 中可能触发渲染卡顿，上线前务必真机测
vh、哪一层该砍掉默认 margin、以及什么时候该放弃 fixed 改用 JS 补偿滚动。 
