background-size: cover 失效主因是容器未撑高、viewport 缺失及 html/body 未设 height: 100%；需三者齐备，再配合 min-height: 100vh、background-position: center center 和 background-repeat: no-repeat 才能稳定全屏。
background-size: cover 是最常用且可靠的全屏铺满方案，但直接写它大概率不生效——问题几乎都出在容器高度没撑开、viewport 缺失或 html/body 没设高宽。
为什么 background-size: cover 看似写了却只显示一小条
常见错误现象：background-size: cover 写对了，但背景图卡在页面顶部、移动端横屏留白、iOS Safari 滚动卡顿。这些不是 CSS 写错了，而是三个前提没满足：
-
html和body必须同时设height: 100%+margin: 0+padding: 0 - 容器（比如
.hero）必须有明确高度，推荐用min-height: 100vh，比height: 100vh更安全，避免内容超一屏时背景被截断 - HTML 中必须有
，否则移动端按伪宽屏渲染，cover的裁剪逻辑全乱
cover、contain、100% 100% 三者怎么选
它们行为完全不同，不能混用：
-
background-size: cover：等比缩放 → 填满容器 → 居中裁剪。适合氛围型全屏背景，但人脸/按钮可能被切掉 -
background-size: contain：等比缩放 → 完整可见 → 容器内居中。适合 logo、图标、产品图，全屏下必然留白，慎用 -
background-size: 100% 100%：强制拉伸到容器宽高，不保比例。适合必须填满又允许变形的场景（如登录页底图），注意单位是%，不是vw/vh
若想保留全部内容又不留白，只能接受拉伸：background-size: 100vw 100vh（单位是 vw 和 vh，不是百分号）
移动端人脸/按钮总被裁？别改 cover，调 background-position
cover 的裁剪位置是确定的：由容器宽高比和图片宽高比的差值决定。iPhone 14 Pro 是 19.5:9，你图若是 16:9，竖屏下上下必被砍。它不识别“人脸”，也不管“按钮在哪”。
- 人物居中站立 → 改用
background-position: center top，把头顶留在可视区 - 按钮在底部 → 用
background-position: center 80%（百分比是相对于容器高度） - 避免用
background-attachment: fixed：iOS Safari 有性能陷阱，且和min-height: 100vh冲突
性能与兼容性不能忽略的细节
大图用 cover 时，浏览器仍需解码整张图，不是只画可视部分。真实项目里必须考虑：
- 用
image-set()或srcset配合media query提供多分辨率版本，比如 @2x 图给 Retina 屏 - 旧安卓 WebView 对
background-position: center解析不准，建议写成center center - Less/Sass 封装
.full-bg()mixin 时，别硬编码background-attachment或background-repeat，让调用方显式控制，避免隐藏副作用
真正容易被忽略的是：图片构图要预留安全区。再精准的 background-position 也救不了原图就把关键信息贴边的设计。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
