根本原因是cover只缩放图片而不撑开容器，必须确保目标元素有足够高度（如min-height: 100vh），并配齐background-image、no-repeat、center等属性，否则无法视觉铺满。
background-size: cover 为什么没铺满全屏
根本原因不是 cover 失效，而是它只缩放图片，不撑开容器。如果父元素（比如 body 或某个 div）高度为 auto，cover 就只能在几像素高的区域里缩放——自然只看到一条带。
必须确保目标元素至少占满视口高度：
-
min-height: 100vh是首选，比height: 100vh更安全，内容超长时不会被截断 - 若用在
body，需同步设html, body { height: 100%; margin: 0; }，否则100%无计算基准 - Flex 容器中要检查
align-items，flex-start会把背景元素“吸顶”，显式写align-items: stretch更可靠
内联 style 中 background-size: cover 不生效
单独写 style="background-size: cover" 永远无效——浏览器没有图可缩放，直接忽略该声明。
内联写法必须配齐基础属性，且顺序无关紧要，但缺一不可：
-
background-image: url('bg.jpg')（路径必须加引号，url(bg.jpg)在多数浏览器中会失败） background-size: coverbackground-repeat: no-repeatbackground-position: center center-
min-height: 100vh（关键！否则手机上只剩顶部一小条）
别用 background 复合属性写内联样式，比如 background: url(...) no-repeat center / cover——斜杠后值易被解析错误，cover 可能被重置为 auto。
要完整显示图片、不裁剪，还能铺满吗
不能同时满足「完整显示 + 铺满无留白」，这是数学矛盾：contain 保证完整但必留白；cover 保证铺满但必裁剪。
选 contain 的典型场景是 logo、图标类背景，或需保留全部信息的示意图：
-
background-size: contain会按宽高比中较小的缩放倍数等比缩放，确保图片完全可见 - 留白位置不可控（可能上下、左右、四边都有），无法靠
background-position“填满”空白 - 若想视觉上“撑高”容器来减少留白，可用
padding-top百分比技巧（如padding-top: 56.25%对应 16:9），但仅适用于固定宽高比图片
background-attachment: fixed 导致滚动卡顿或错位
加了 fixed 后背景不动、内容滚动，看似酷，实则隐患多：
- 在 iOS Safari 和部分安卓 WebView 中，
fixed背景常触发重绘异常，出现撕裂、闪烁或定位偏移 - 页面有 transform 层级（如
scale、translateZ）时，fixed行为更不可靠 - 性能上，
fixed强制每帧重合成，低端机明显掉帧
真要实现视差效果，优先用纯 CSS 的 background-attachment: scroll + transform: translateY() 模拟，或 JS 控制滚动监听+动态调整 background-position，避开 fixed 的兼容雷区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
