background-size: cover需容器有明确高度才生效，否则因content box高度为0仅显示图片左上角；应使用min-h-screen或min-height:100vh避免截断与跳变，并确保html/body高度设为100%且无margin。
background-size: cover 必须配合明确高度容器才生效
只写 background-size: cover 没反应，是因为它缩放的目标是元素的 content box，而空 <div>、未设高的 flex 子项、或父容器有 <code>overflow: hidden 都会让这个盒子高度为 0。浏览器只能按默认 background-position: 0 0 渲染，结果只显示图片左上角一小块。
必须确保容器有明确高度：
-
min-h-screen（Tailwind）或min-height: 100vh（原生 CSS）比h-screen/height: 100vh更可靠，避免内容超长时截断 - 若在
flex-col容器里，子元素需加flex-1或h-full才能撑开高度 - 避免
h-auto和bg-cover共存——前者随内容变高，后者需要固定参照尺寸
为什么图片看起来“被拉伸”，其实是裁剪位置错了
background-size: cover 从不拉伸像素，它严格等比缩放，直到短边填满容器。当图片宽高比和视口差异大（比如竖构图配横屏），必然上下或左右被裁。你以为是变形，其实是关键内容（如人脸）被切掉了。
解决焦点偏移：
-
bg-center是基础，但它只对缩放后的图居中 - 若人脸偏上，可改用
bg-[center_top]或bg-[top_20%]（需开启 Tailwind 的 arbitrary value 支持） - 别用
bg-top+bg-cover组合——bg-top会让焦点上移，放大后裁得更狠
移动端 100vh 不准，优先用 min-h-screen 或 JS 动态修正
iOS Safari 在地址栏隐藏/显示时会动态改变视口高度，height: 100vh 可能瞬间变小，导致背景图“跳一下”或露出白边。这不是 bug，是浏览器行为。
稳妥做法：
- 用
min-h-screen（Tailwind）或min-height: 100vh（原生），它不会随视口收缩而变矮 - 若必须精确贴合滚动区域，可用 JS 监听
resize并更新style.height，但多数场景没必要 - 全屏 banner 类需求，建议图片本身宽高比接近 16:9 或 4:3，再配合
background-position: center center
背景设在 html 上比 body 更干净
很多人把背景加在 body 上，但 body 默认高度由内容决定，不是 100% 视口高。即使设了 height: 100%，也得同步给 html 加 height: 100% 和 margin: 0，否则照样失效。
推荐写法（原生 CSS）：
html {
background: url('bg.jpg') no-repeat center center;
background-size: cover;
height: 100%;
}
body {
margin: 0;
height: 100%;
}
这样背景固定在视口，不随内容滚动，也不会被滚动条干扰；no-repeat 和 center center 缺一不可，否则定位偏移或平铺。
真正麻烦的从来不是属性本身，而是容器有没有被撑开、视口高度是否稳定、以及图片原始比例是否可控——这三处任一出错，cover 就会表现异常。
