background-size: cover 实现全屏背景需同时设置 min-height: 100vh、background-image、background-position: center 和 background-repeat: no-repeat，缺一不可；否则因容器高度为0或未禁用重复而失效。
直接用 background-size: cover 配合 min-height: 100vh 就能实现稳定全屏背景，但漏掉任意一个配套声明，图片就只会显示左上角一小块或留白——不是 CSS 不行，是容器没高度、路径写错、或忘了禁用重复。
为什么 background-size: cover 没铺满整个屏幕
常见现象是背景图只占页面顶部几行、上下/左右大片留白，甚至完全看不见。这不是 cover 失效，而是目标元素（通常是 body）实际高度为 0px 或远小于视口。
-
html和body默认有margin，且height不继承视口，只包裹内容 - 只给
body设background-size: cover，但没设高度，浏览器根本不知道“全屏”指多高 - 用 DevTools 查看
body的 Computed height，常会发现是 24px 或类似小值
必须同时设置的四个 CSS 声明
单写 background-size: cover 不足以实现稳定全屏。以下四条缺一不可：
-
min-height: 100vh：比height: 100vh更安全，避免内容超长时被截断；iOS Safari 中可考虑100dvh替代 -
background-image: url("bg.jpg")：路径以 HTML 文件为基准，注意相对路径是否正确（比如./images/hero.jpg） -
background-position: center：防止关键构图（如人脸）被裁掉；若主体在顶部，改用center top -
background-repeat: no-repeat：漏写会导致小图平铺，cover完全失效
cover vs 100% 100% vs contain 怎么选
三者缩放逻辑完全不同，选错直接导致变形或留白：
立即学习“前端免费学习笔记（深入）”；
-
background-size: cover：等比缩放，确保填满容器，可能裁剪边缘；适合首屏大图、视觉优先场景 -
background-size: 100% 100%：强制拉伸宽高，必然破坏比例；仅适用于纯纹理、抽象图等无构图要求的图 -
background-size: contain：等比缩放，确保完整显示，必然留白；适合 Logo、图标类背景，不推荐用于摄影类大图
移动端和高清屏容易踩的坑
看似写对了 CSS，但在 iPhone 或 MacBook 上出现模糊、跳动、卡顿，往往是因为这些细节没处理：
- iOS Safari 地址栏收起/展开时，
100vh会动态变化（从 ~100% 变成 ~105% 或 90%），导致背景“弹跳”；更稳的解法是html { min-height: 100%; }+body { min-height: 100vh; } -
background-attachment: fixed在部分 iOS Safari 中会被禁用或导致滚动卡顿，移动端默认用scroll更可靠 - 图片分辨率不足（低于 1920×1080）会在大屏或 Retina 屏上模糊，建议 ≥ 2560×1440，格式优先 WebP
- 图片加载前白屏明显？加
background-color: #222作为兜底色，颜色打底、图片盖在上面
真正让 cover 稳定工作的，永远不是那行关键声明，而是 html 元素的高度继承链、no-repeat 是否漏写、路径是否拼错——这些地方出问题，调试时最容易忽略。
