background-size: cover 必须配 min-height: 100vh 和 background-position: center center
只写一个background-size: cover，效果往往翻车。它的原理是等比缩放背景图，但这需要一个可测量的高度作为基准。如果父元素高度没设（比如靠内容撑开），cover 就会降级成按原始尺寸渲染，缩放时自然拉伸或裁切错位。
解决方案其实很直接：
- **min-height: 100vh 是底线**：保证至少占满初始视口，否则页面一滚，下半截直接变纯色，视觉上自然就崩了。
- **更优选是 min-height: 100vh + height: 100dvh**：现代浏览器中 100dvh 能感知地址栏收起或弹出，避免 Safari 下“顶部被砍”或“底部留白”的经典Bug。
- **background-position: center center 不可省**：单写 center 在 Safari 有解析歧义，可能导致标题、人脸等关键内容被意外裁掉。
- **别用 height: 100%**：它依赖父级高度，而 html 和 body 默认不占满视口，用了就等于没设。
别把背景图直接加在 .container 或 .row 上
Bootstrap 的.container 和 .row 本质是流式布局容器，没有独立的定位上下文。如果把 background-image 塞进去，图片会按文档流渲染——页面缩放或 viewport 变化时，容器宽度和高度重算，cover 的缩放比例跟着跳，结果就是“抖动”或“边缘错位”。
正确的做法是再加一层包装：
- **外层独立 wrapper**：...
.hero-bg 上**：.hero-bg { background-image: url(...); background-size: cover; min-height: 100vh; }
- **如果非要嵌套在栅格内**，要手动抵消干扰：给 wrapper 加 mx-n3 px-0，抵消 .row 的负 margin 和 .container 的 padding。
- **检查祖先元素是否设了 overflow: hidden**：它会直接把 cover 裁切部分截断，看起来像图片被“切半”，视觉上异常突出。
background-attachment: fixed 在移动端基本不可靠
很多开发者想用它实现“缩放时不随页面移动”的效果，但在 iOS Safari 上成功率很低。它不仅常被禁用（尤其 iOS 15 之前），还会触发合成限制导致卡顿；缩放时 viewport 尺寸变化，fixed 定位基准漂移，反而加剧变形感。 这里有几个实战建议： - **真需要固定视差效果**，优先用 JS +IntersectionObserver + transform: translateY() 模拟，避开 fixed 的兼容黑洞。
- **若坚持用 CSS**，必须加降级：@supports (background-attachment: fixed) { ... }，否则旧 Safari 直接忽略整条规则。
- **千万别在同一元素上混用 fixed 和 transform**（比如 Bootstrap 的 .carousel 内部），浏览器会强制退化为 scroll。
- **移动端调试时**，用 DevTools 的“Toggle device toolbar”配合“Network → Disable cache”真机复现，模拟器经常掩盖真实问题。
图源分辨率不足才是模糊和拉伸的真正原因
缩放后图片发虚、边缘锯齿，90% 是图源本身分辨率不够。CSS 的background-size 再精准，也填不了物理像素缺失的坑——Retina 屏会把一张 1920×1080 的图拉伸到 3840×2160 渲染，结果就是糊成一片。
所以重点在源头上：
- **提供 2x 图源最实在**：比如 banner 需要 1920px 宽，就准备 3840px 宽的图，用 image-set() 或媒体查询切换（但要注意 Safari 对 image-set() 支持较弱）。
- **必须设 fallback 色**：background-color: #2c3e50，图片加载失败时底色暴露，主观“变形感”会更强。
- **别依赖 Bootstrap 的 .bg-* 工具类**：它们只设纯色，且会覆盖自定义背景图声明。
- **检查 Network 面板确认是否 404**：路径错误时浏览器静默降级，你看到的“变形”其实是透明背景加文字叠加的错觉。
说到底，移动端缩放背景图的关键不是“锁死”，而是“可控缩放”。所有看似 CSS 的问题，最终都落在图源质量、容器高度约束和浏览器对 fixed 的实际支持度上。漏掉任意一环，真机上随时崩给你看。
