background-size: cover 不一定铺满屏幕，因其依赖容器高度、background-position 和 background-repeat 配合；需设 height: 100vh（或 100dvh）、center 定位、no-repeat，否则留白或裁剪异常。
background-size: cover 为什么图片还是没铺满？
不是写了 background-size: cover 就一定全屏——它只保证「等比缩放后完全覆盖容器」，但最终是否“视觉上铺满”，取决于容器自身尺寸和定位方式。常见现象是：背景图只占顶部一小块，或左右/上下留白，甚至整个背景消失。
- 父容器（比如
body或html）没设高度，cover没参照物，会按默认行高或内容高度缩放 - 容器用了
position: relative但没设height: 100vh，实际高度为 0 -
background-attachment: fixed在某些移动端 Safari 下失效，导致滚动时背景“错位”而非固定覆盖
全屏背景必须配齐的三个 CSS 声明
单独写 background-size: cover 不够，它依赖容器尺寸、背景原点和裁剪行为。缺一不可：
-
height: 100vh—— 确保容器撑满视口高度（注意：iOS Safari 中100vh可能被地址栏压缩，可改用100dvh或 JS fallback） -
background-position: center center—— 防止图片偏左/偏上，尤其在宽高比差异大时 -
background-repeat: no-repeat—— 否则小图会被平铺，cover失效
完整最小可用块：
section {
height: 100vh;
background-image: url("bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
cover 和 contain 的实际区别在哪？
二者都做等比缩放，但裁剪逻辑相反，选错会导致关键内容被切掉或留白：
-
cover：缩放到「最短边刚好填满容器」，长边溢出 → 适合强调氛围、允许裁剪主体 -
contain：缩放到「最长边刚好贴合容器」，短边留白 → 适合展示完整图表、Logo、证件照 - 性能无差异，但
cover更常触发 GPU 加速（尤其配合will-change: transform），contain在低分辨率屏上更容易出现模糊
移动端 Safari 全屏背景失效的绕过方案
iOS 15+ 对 100vh 的处理不稳定，页面滚动时背景突然收缩；同时 background-attachment: fixed 在部分版本中被禁用。不用 JS 就能缓解：
- 把背景层从
body移到一个独立div，并设position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; - 用
100dvh替代100vh（支持度：Safari 16.4+，Chrome 105+） - 加一行
background-origin: border-box，避免内边距影响覆盖范围
容易被忽略的是：图片本身分辨率太低（比如宽度 cover 会强行拉伸，产生模糊。别指望 CSS 补救烂图源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
