最稳妥的选择是 background-size: cover 并配合 background-position: center，需确保容器有明确高度（如 min-height: 100vh），避免父级塌陷、图源分辨率不足或滥用 background-attachment: fixed。
background-size: cover 是最稳妥的选择
只设 background-repeat: no-repeat 不解决变形问题——它只是停掉平铺，图片仍按原始尺寸渲染，容器一缩放，不是留白就是拉伸。真正起作用的是 background-size 的取值。
cover 会等比缩放图片，确保完全覆盖容器（哪怕裁剪边缘），且始终维持原始宽高比；100% 100% 则强制拉伸填满，必然变形；contain 保证全图可见但常留白，不适合 banner 类场景。
- 推荐优先用
background-size: cover - 必须配合
background-position: center，否则裁剪位置不可控 - 如果容器高度没设（比如仅靠内容撑开），
cover可能失效——得加min-height: 100vh或明确高度
Bootstrap 容器里容易漏掉的父级高度约束
在 <div class="container"><div class="row bg-banner"> 这类结构中，<code>.row 默认是 min-height: auto，而 background-size: cover 需要一个可测量的高度才能计算缩放比例。
常见现象：浏览器窗口缩放时背景图突然“跳变”或留白，审查元素里看样式都对，关掉再试就失效——大概率是父容器高度塌陷了。
- 给背景所在元素加
min-height: 100vh（视口高度）最直接 - 若需适配移动端，可用
min-height: 100dvh（更准确处理地址栏遮挡） - 避免只依赖 Bootstrap 的
h-100工具类——它只生效于已有高度的父容器
固定背景（fixed）和响应式之间的冲突点
加 background-attachment: fixed 实现视差效果很常见，但它会让背景图基于视口定位，而不是容器。一旦容器有 padding/margin/border 或使用了 flex/grid 布局，图片就可能错位、偏移甚至被截断。
尤其在 Bootstrap 的 .container + .row 嵌套下，fixed 背景常和文字层“脱节”，滚动时文字像浮在图上，但图边缘却对不齐容器边界。
- 除非明确需要视差，否则别轻易加
fixed - 若必须用，建议把背景层单独抽成
<div class="bg-fixed">，脱离 Bootstrap 栅格流，用 <code>position: fixed+z-index控制层级 -
fixed在 iOS Safari 上有兼容性问题，部分机型会禁用硬件加速导致卡顿 - 优先用
<picture></picture>+<source srcset="..." media="..."></source>替代纯 CSS 背景 - 若坚持用 CSS，至少准备两套图：
@2x后缀图 + 媒体查询判断min-resolution: 2dppx - 不要指望
background-image: url(...)里塞 SVG 就万事大吉——复杂 SVG 在缩放时也可能糊，尤其含滤镜或渐变
高倍屏（2x/3x）下图片模糊的根本原因
用一张 1920×1080 的图，在 Retina 屏上会被拉伸到物理像素渲染，结果就是发虚。CSS 的 background-size 再精准也救不了分辨率不足的图源。
纯 CSS 无法动态切换图源，image-set() 支持有限（Safari 以外支持弱），所以实际项目中得靠 HTML 层配合。
