background-size: cover在body上“没铺满”根本原因是body未撑满视口，需同步设置html, body { height: 100%; margin: 0; padding: 0; }，否则cover仅在塌陷的几像素内缩放；更稳妥做法是将背景设在html上。
background-size: cover 在 body 上写对了也常不生效，根本不是属性问题，而是 body 没撑开、没参照物、没清边距。
为什么 background-size: cover 在 body 上看起来“没铺满”
因为 body 默认高度由内容决定，不是视口高度；哪怕写了 height: 100%，若父级 html 没设高，body 就塌陷成几像素高，cover 只能在那几像素里缩放——自然只看到一条带。
- 必须同步设置
html, body { height: 100%; margin: 0; padding: 0; } - 更稳妥的做法是把背景设在
html上，而非body或某个div（iOS 地址栏抖动时100vh不稳定，html { height: 100% }更可靠） - 如果用
min-height: 100vh，要确保它加在目标元素上（比如body或独立容器），不能只靠background-size自己撑高
内联 style 中 background-size: cover 为什么无效
单独写 style="background-size: cover" 永远不会生效——浏览器没图可缩，直接忽略该声明。
- 内联必须配齐四要素：
background-image、background-size: cover、background-repeat: no-repeat、background-position: center center -
background-image的路径必须加引号：url('bg.jpg')，url(bg.jpg)在多数浏览器中会失败 - 别用复合写法
background: url() no-repeat center / cover——斜杠后值易被解析错误，cover可能被重置为auto
移动端人脸/Logo 总被裁切，怎么微调构图
cover 只保证填满+等比缩放，不管构图。默认 center center 常把人脸切掉，得靠 background-position 主动提拉视觉重心。
- 优先用语义明确值：
center top、center 20%，比50% 50%更稳（少数安卓 WebView 对百分比解析有偏差） - 竖屏下人像易被裁，配合媒体查询调整：
@media (max-width: 768px) { background-position: center 10%; } - 如果主体偏右（比如人物视线朝右），可用
right 20% center微调，避免脸被裁 - 别依赖“自动居中”，始终显式写
background-position: center center，旧版 iOS Safari 在fixed场景下对未声明值处理不稳定
高清屏模糊、小屏浪费流量，怎么按设备像素比加载
background-size: cover 不管你用的是 1200px 还是 4K 图，浏览器只加载 background-image 里写的那一张。结果就是：iPhone 15 Pro 上拉伸发虚，低端安卓却下了一张 4K 图。
- 现代方案优先用
image-set()：background-image: image-set( url(img/bg-1200.jpg) 1x, url(img/bg-2400.jpg) 2x, url(img/bg-3600.jpg) 3x ); - 不用
srcset或媒体查询，image-set()更轻量，且由浏览器自主选择最匹配的资源 - 若需兼容老浏览器（如 IE9+），可在
image-set()前补一行background-image: url(img/bg-1200.jpg);作降级
真正难的不是写对 cover，而是理解它不负责撑容器、不智能裁剪、不自动适配像素比——所有“失效”，几乎都卡在这三个认知盲区上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
