全屏背景图需用 min-h-screen + bg-center bg-cover bg-no-repeat 组合；禁用 bg-fixed 防 iOS 错位；避免 height 塌陷与平铺失真。
背景图不铺满全屏，只显示左上角一小块
根本原因是 Tailwind 默认的 bg-cover 作用在有尺寸限制的容器上，而 HTML body 默认没有高度约束，导致父容器（比如 <div class="bg-[url(...)]">）高度塌陷。必须显式让背景容器撑满视口。
- 给背景容器加
min-h-screen（不是h-screen），避免内容少时底部留白 - 确保该容器是直接子元素或已脱离文档流，否则受父级 padding/margin 影响
- 若用
background-image写在自定义 CSS 中，记得同时设background-size: cover和background-position: center
图片被拉伸变形或裁剪过度
bg-cover 会缩放图片以完全覆盖容器，但可能裁掉边缘；bg-contain 保持比例但留白。多数全屏场景要的是“居中覆盖+合理裁剪”，关键靠组合类控制。
- 固定写法：
bg-center bg-cover bg-no-repeat—— 缺一不可 - 想保留更多顶部/底部内容？改用
bg-top或bg-bottom替代bg-center - 如果图太小，
bg-[length:100%_100%]强制拉伸（不推荐，失真）
背景图在移动端显示异常
手机 Safari 对 background-attachment: fixed 支持差，且容易触发滚动卡顿。全屏背景通常不需要视差效果，应主动禁用。
- 避免使用
bg-fixed—— 它在 iOS 上常导致背景错位或闪烁 - 如需响应式适配，用
md:bg-[url(...)]+sm:bg-none控制不同断点是否启用背景 - 加载大图前先设
bg-gray-100占位，防止白屏
如何让背景图随内容滚动而不是固定
默认就是滚动行为，只有加了 bg-fixed 才会固定。但很多人误以为“全屏背景=固定”，结果在滚动时发现背景不动、内容从上面划过，其实是预期外的视觉割裂。
立即学习“前端免费学习笔记（深入）”；
- 删掉所有
bg-fixed—— 这是最常见的多余操作 - 若容器用了
position: sticky或transform，可能触发层叠上下文，导致背景渲染异常，此时加will-change: transform反而更糟，优先检查定位逻辑 - 真正需要视差时，用 Intersection Observer 配合 translateY 动态控制，别硬套
bg-fixed
min-h-screen 和 bg-no-repeat 的组合——少了任一个，要么铺不满，要么平铺成马赛克。 
