background-size: 100% 100% 是强制拉伸背景图填满容器的方案，放弃原始宽高比，无裁剪无留白，需确保父容器有明确宽高，适用于允许形变的抽象图或渐变底图。
background-size: 100% 100% 是最直接的拉伸方案
要让背景图强制铺满整个容器（比如全屏、整行或某个 .section），不保留原始比例、不裁剪也不留白，就用 background-size: 100% 100%。它和 cover 或 contain 的逻辑完全不同：不是“适配”，而是“拉伸到填满宽高”。
- 适用于必须严丝合缝覆盖、且图片内容允许形变的场景（比如纯色渐变底图、抽象纹理、海报式首屏）
- 注意：如果原图是人像或带文字的 Banner，拉伸后会明显失真——这不是 bug，是预期行为
- 必须确保父容器有明确宽高，否则
100% 100%会退化为无效值（比如div默认高度由内容撑开，没内容就高为 0）
全屏拉伸时，html 和 body 必须设宽高
很多人写了 background-size: 100% 100% 却只看到顶部一小条图，问题常出在容器本身没占满视口。
-
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }是必要前提 - 漏掉
height: 100%，body高度就只等于内容高度，背景图自然只铺那么高 - 如果页面内容超长，加
overflow: hidden可防滚动条意外出现（但慎用，可能截断可访问性内容）
Bootstrap 中用 class 控制背景图要绕开栅格默认行为
直接给 <div class="row"> 加背景图，常发现左右有空白、图没拉满——因为 Bootstrap 的 <code>.row 有负 margin，.col 有 padding，且默认不设高。
- 推荐做法：不用
.row/.col承载背景图，改用独立<div class="hero-section"> 并手动设 <code>height: 100vh或具体像素值 - 若坚持用栅格，需重置：给容器加
style="margin: 0; padding: 0; height: 100vh;"，再配合background-size: 100% 100% - Bootstrap 自带的
bg-*类只支持纯色，不支持图片；别指望bg-dark能塞进一张图 -
background-size: cover→ 保持比例 + 填满容器 → 必然有裁剪风险 -
background-size: contain→ 保持比例 + 完整显示 → 必然有留白 -
background-size: 100% 100%→ 放弃比例 + 强制填满 → 无裁剪、无留白、有形变 - 浏览器兼容性没问题，所有现代浏览器（包括 Edge 16+）都支持
100% 100%写法
cover 和 contain 不是“拉伸”，别混淆使用目的
很多人搜“拉伸”却用了 cover，结果图被裁掉关键内容——这是概念错位。
实际最难的不是写哪行 CSS，而是想清楚：这张图是否真的能接受宽高比被破坏。一旦选了 100% 100%，就等于交出了对图像几何关系的控制权。
