min-h-screen 是必须的，因仅用 bg-cover 和 bg-center 时父容器高度为0导致背景图只显左上角；需搭配 bg-no-repeat 防止404时马赛克重复；bg-fixed 在ios safari不支持且易被 transform 或 overflow 截断，应避免使用。
min-h-screen 是必须的，不是可选的
只写 bg-cover 和 bg-center 但没加高度类，背景图大概率只显示左上角一小块——因为父容器 content box 高度为 0，bg-cover 没有参照尺寸可缩放。
必须用 min-h-screen（不是 h-screen），原因很实际：
-
h-screen在内容超出一屏时会截断，滚动后底部空白；min-h-screen保证至少一屏高，内容多时自动撑开 - 移动端地址栏收起/展开会导致
h-screen值突变，min-h-[100dvh]更稳，但兼容性略差（IE 不支持） - 若容器在 flex 或 grid 布局里，还需确认它没被压缩：比如
flex-1或h-full要配合父级高度生效
bg-cover + bg-center + bg-no-repeat 缺一不可
这三个类是组合生效的，单独用任意一个都达不到“全屏居中覆盖”的效果：
-
bg-cover：等比缩放图片以完全覆盖容器，不拉伸像素，但会裁剪边缘 -
bg-center：让缩放后的图片以中心为锚点定位；若关键内容偏上，可用bg-[top_20%]微调（需开启 arbitrary value） -
bg-no-repeat：禁用默认平铺行为，否则小图会马赛克式重复填满屏幕
漏掉 bg-no-repeat 是常见错误——尤其当图片路径错导致 404 时，浏览器 fallback 到默认 repeat，整个页面糊成一片。
别碰 bg-fixed，它在多数场景下就是个坑
bg-fixed 只是让背景相对于视口固定，并非真正视差效果。它在真实项目中问题集中：
- iOS Safari 完全不支持，且不报任何 warning，加了等于没加
- Next.js 中与
next/image冲突：外层 div 加bg-fixed，但图片是子<img>，样式根本不起作用 - 只要父容器有
overflow: hidden或任意transform（包括translateZ(0)），就会切断 fixed 锚点，背景跟着滚动
真需要视差，用 IntersectionObserver 驱动 transform: translateY() 更可控；仅内部管理后台、浏览器可控时，才考虑 min-h-[100dvh] + before 伪元素方案。
背景图加载失败时，页面不能白屏
Tailwind 不处理图片加载失败逻辑。URL 404 或网络慢时，用户看到的是纯白或底色透出——这不是样式问题，是兜底缺失。
简单可靠的应对方式：
- 在自定义 class 中同时设
background-color和background-image，颜色作为 fallback：.bg-hero { background-color: #f9fafb; background-image: url('/hero.jpg'); } - 把图放进
public/目录，用绝对路径url('/hero.jpg')，避免构建工具路径解析失败 - 大图加占位：
bg-gray-100先撑开视觉区块，再用 JS 监听加载完成切换
最易被忽略的一点：所有这些类和配置，改完 tailwind.config.js 后必须重启开发服务器，热更新不会重新生成 bg-[url()] 类。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
