background-size: cover未铺满的根本原因是容器无足够高度，必须配齐min-height: 100vh、background-image、no-repeat、center，否则仅缩放图片而不撑开容器。
background-size 不是 STYLE 属性，它是 CSS 属性，必须写在 style 属性值里（内联）或独立 CSS 规则中。单独写 background-size 在 HTML 的 style 里会失效——因为没图、没定位、没禁重复，浏览器直接忽略。
为什么 background-size: cover 看起来没铺满
根本不是 cover 失效，而是它只缩放图片，不撑开容器。如果目标元素高度为 auto 或未设最小高度，cover 就只能在一个几像素高的区域里缩放，结果只剩顶部一条色带。
- 必须加
min-height: 100vh（比height: 100vh更安全，内容超长时不截断） - 若用在
<body>，要同步设html, body { height: 100%; margin: 0; }，否则百分比/视口单位无计算基准 - Flex 容器中检查
align-items：默认flex-start会让背景元素“吸顶”，显式写align-items: stretch才能撑高
内联 style 中 background-size 生效的硬性条件
单写 style="background-size: cover" 永远无效。必须一次性配齐以下四点，缺一不可：
-
background-image: url('bg.jpg')（路径必须加引号，url(bg.jpg)在多数浏览器中解析失败） background-size: cover-
background-repeat: no-repeat（否则小图会被平铺，和cover冲突） -
min-height: 100vh（关键！移动端尤其容易漏）
别用复合写法 background: url() no-repeat center / cover —— 斜杠后值易被解析错误，cover 可能被重置为 auto。
cover、contain、100% 100% 到底怎么选
三者行为完全不同，选错就是目标错位：
-
cover：等比缩放，填满容器 → 可能裁剪，**不拉伸**；适合全屏 Hero 区、封面图 -
contain：等比缩放，完整显示 → 必然留白，**不拉伸**；适合 logo、示意图、需保留全部信息的图 -
100% 100%：强制拉宽又拉高 → **一定拉伸变形**，除非图片和容器比例完全一致；仅适用于无比例要求的装饰性图案
想「完整显示 + 铺满无留白」？数学上不可能。二者互斥，强行兼顾只会让设计师反复改图或前端加 hack。
容易被忽略的兼容与性能细节
cover 和 contain 是原生支持，所有现代浏览器（IE9+）都 OK，无额外渲染开销。但注意两个隐性坑：
-
background-attachment: fixed在 iOS Safari 和部分安卓 WebView 中常触发重绘异常，出现撕裂、闪烁或定位偏移；有transform层级时更不可靠 - 图片原始比例影响最终效果：竖图配横屏视口，
cover必然裁上下；横图配窄容器，必然裁左右——这不是 bug，是预期行为
真正难的不是写对 background-size，而是判断该用哪个值，并提前和设计对齐「可裁剪范围」和「留白容忍度」。
