cover强制等比缩放至至少一维撑满容器并裁剪多余部分，适合视觉冲击场景；contain则确保整图完整可见并居中留白，适用于需看清全部细节的场景。
想让背景图“满屏”但文字被裁掉、留白或拉伸变形？问题基本出在 background-size 值选错了——cover 和 contain 不是风格偏好，而是适配逻辑的根本差异。
cover 为什么常被推荐用于全屏背景
它强制图片等比缩放，直到宽或高至少有一个撑满容器，多余部分自动裁剪。适合强调视觉冲击、不依赖完整构图的场景。
- 必须搭配
background-repeat: no-repeat，否则小图会平铺成马赛克 - 一定要设
background-position: center，否则裁剪位置随机，关键内容（比如人脸）可能直接消失 - 移动端慎用
background-attachment: fixed，iOS Safari 渲染异常概率高，滚动卡顿或背景错位 - 如果图片原始比例和视口差距极大（比如竖图配横屏），顶部/底部可能被裁太多，这时得换图或加
min-height: 100vh防止容器塌陷
contain 什么时候才真正有用
它优先保证整张图完整可见，缩放后在容器内居中，四周留白。不是“不好看”的备选，而是有明确需求时的正确解。
- 文档类页面的 Logo 背景、产品截图说明页——用户必须看清每个像素，不能裁
- 配合
background-color使用，留白区域不会暴露白底，比如background-color: #f5f5f5 - 不要和
100% 100%混用：100% 100%强制拉伸，完全破坏比例，contain才是“保真”方案 - 如果留白过大，说明图片本身分辨率太低或比例严重失配，换图比调 CSS 更有效
为什么设了 cover 还没满屏
90% 是因为父容器高度为 0，背景图无处可展。CSS 背景不会主动撑开容器，它只渲染在已有尺寸范围内。
立即学习“前端免费学习笔记（深入）”；
- 必须写
html, body { height: 100%; margin: 0; padding: 0; }，缺一不可 - 如果背景加在某个
<div>上，该 div 得有明确高度，比如height: 100vh或min-height: 100vh - Flex 或 Grid 容器里，子元素未设
height: 100%也会导致背景只占内容高度，不是视口高度 - 检查是否意外触发了
overflow: hidden或transform，某些组合会让背景渲染区域被截断
cover 和 contain 的底层行为差异
它们的计算基准都是 background-origin（默认 padding-box），但缩放逻辑完全不同：
-
cover：找最小缩放倍数，使图片的宽 ≥ 容器宽 且 高 ≥ 容器高 -
contain：找最大缩放倍数，使图片的宽 ≤ 容器宽 且 高 ≤ 容器高 - 两者都不受
background-clip影响，但若设了border-box，而容器有 border，实际可视区域会变小，造成误判 - 没有“局部 cover”这种东西——
background-size是全局计算，无法指定只让某一块区域优先填充
真正难的不是记住哪个值填哪，而是看懂设计意图：你要用户看见全部信息，还是沉浸式氛围？选错值之后调 background-position 补救，往往只是把问题从一边挪到另一边。
