background-size: cover必须搭配background-repeat: no-repeat、background-position: center center及容器明确宽高（如height: 100vh），否则遮罩不全、移动端失效、渐变层消失。
直接用 background-size: cover 就能实现图片自适应全屏遮罩背景，但多数人卡在遮罩不全、移动端失效、渐变层消失这三处——问题不在写法本身，而在配套属性没配齐或浏览器兼容策略没兜住。
background-size: cover 必须搭配哪些 CSS 属性？
单独写 background-size: cover 是无效的。它只负责缩放逻辑，但前提是容器有明确尺寸、图片有定位基准、重复行为被禁止。
-
background-repeat: no-repeat：不加这句，小图会平铺满屏，变成“马赛克背景” -
background-position: center center：确保裁剪时保留画面主体，不是随机切一刀 - 容器必须有宽高：比如
body { height: 100vh; }或div.full-bg { width: 100vw; height: 100vh; }；留空或设height: auto会导致遮罩塌陷成一条线 - 慎用
background-attachment: fixed：iOS Safari 旧版本（≤15.6）和部分安卓 WebView 中，它会让cover失效，图片只显示左上角一小块
为什么渐变遮罩在手机上“不见了”？
常见写法：background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(...); background-size: cover; —— 在桌面端正常，小屏上却像没加渐变。根本原因是：渐变层默认只覆盖「原始图片尺寸」区域，而 cover 是靠拉伸/裁剪实现的，两者计算时机不同步。
- 修复方式：把渐变也声明为背景层的一部分，并显式指定其尺寸，例如
background-size: cover, cover（逗号分隔，一一对应） - 更稳妥的做法是放弃多层 background，改用伪元素：
::before绝对定位盖在图片容器上，设background: linear-gradient(...)+inset: 0，这样渐变永远铺满容器 - 避免在渐变中混用
background-attachment: fixed，它和多层 background 的 layer stacking 在移动端极易冲突
全屏背景在 iOS 和安卓 WebView 中的兼容陷阱
不是所有“全屏”都真能撑满。iOS Safari 对 100vh 的解析在地址栏展开/收起时会跳变，导致遮罩高度忽高忽低；某些安卓 WebView（如 QQ 浏览器内核）对 background-size: cover 的初始渲染延迟，首帧闪白。
- 替代方案：不用
vh，改用min-height: 100%;+ 父级html, body { height: 100%; }，更稳定 - 防闪白：给容器加
background-color: #000;作兜底色，比留白更可控 - 图片加载完成前，遮罩层先 display: none；等
img.onload或CSS.supports('background-size', 'cover')检测通过后再 show，避免布局抖动
真正难的不是写对那几行 CSS，而是判断当前设备是否支持 cover 的实时渲染、是否需要 fallback 到 100% 100%、以及渐变层要不要脱离 background 做成独立 DOM 节点——这些决策点藏在用户看不到的地方，但决定了你做的“全屏背景”到底能不能稳稳地盖住整个屏幕。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
