bg-cover和bg-center必须同时使用且容器需有明确宽高（如min-h-screen），否则因content box为0导致仅显示左上角；bg-cover等比缩放并裁剪，非拉伸，焦点偏移需用arbitrary value微调。
要让背景图真正覆盖全屏且不拉伸变形，bg-cover 和 bg-center 必须同时存在，但光写这两个类远远不够——90% 的失效案例，问题出在容器高度塌陷或定位区域为 0。
为什么只加 bg-cover 和 bg-center 还是只显示左上角
bg-cover 的缩放目标是元素的 content box，如果这个盒子高度为 0（比如空 <div>、未设高 flex 子项、或父容器有 <code>overflow-hidden），它就无处“覆盖”。浏览器只能按默认 background-position: 0 0 渲染，结果就是只露出图片左上一小块。
- 检查最外层背景容器是否用了
min-h-screen（不是h-screen）——后者在内容超长时会截断，前者更可靠 - 确认该元素没有被父级 flex/grid 压缩：若在
flex-col里，子项需加flex-1或h-full才能撑开高度 - 避免
h-auto与bg-cover共存，二者逻辑冲突：一个随内容变高，一个需要固定参照尺寸
bg-cover 看起来“拉伸”了？其实是裁剪位置错了
bg-cover 从不拉伸像素，它严格保持原始宽高比，只是等比放大到“短边填满容器”。当图片比例和视口差异大（如竖构图配横屏），必然上下或左右被裁。你以为是拉伸，其实是关键内容被切掉了。
- 加
bg-center是基础，但它只对缩放后的图居中；若人脸偏上，可改用bg-[center_top]或bg-[top_20%]（需开启 arbitrary value） - 别用
bg-top+bg-cover组合——bg-top会让焦点上移，放大后裁得更狠 - 设计师说“人物不能被切”，那就别硬扛
bg-cover，换bg-contain+bg-gray-100填白更稳妥
移动端或响应式下背景图错位、模糊、闪屏
同一张图在不同断点下缩放行为可能突变，尤其当容器宽高比随屏幕变化时。模糊几乎全是图片物理分辨率不足导致，不是 Tailwind 的锅。
- 原图分辨率至少要比最大容器尺寸宽高各多出 20%，比如目标容器 1440×960，图建议 ≥1728×1152
- 用
md:bg-contain lg:bg-cover实现中屏保全图、大屏强覆盖，避免一刀切 - 背景图加载闪屏？在
style里加background-color: #f1f1f1预占位，或用<link rel="preload">提前加载
真机兼容性陷阱：特别是 bg-fixed
想让背景图固定在视口不动？加 bg-fixed 是最简方案，但它在 iOS Safari 和部分安卓 WebView 中支持极差，且与 transform 层级互斥。
-
bg-fixed在 Safari 全屏模式下可能重算缩放基准，导致跳变；上线前务必真机测试 - 页面用了
scale或translate？bg-fixed很可能直接失效——此时改用position: fixed单独挂一层背景<div> 更稳 <li>别为了“视差感”强行加 <code>bg-fixed，多数场景滚动跟随反而更自然
最难的从来不是写对类名，而是理解 background-size 和 background-position 如何在 content box 这个具体区域内协作——三者一错位，视觉就失控。
