background-size: cover 不生效主因是容器无明确尺寸，需设height/min-height或触发BFC；cover裁剪填满，contain缩放留白；响应式下应调background-position并用100dvh防溢出。
background-size: cover 不生效的常见原因
直接写 background-size: cover 却看不到图片铺满容器，大概率不是语法错，而是背景图没“锚定”到一个有明确尺寸的盒子上。CSS 背景图默认渲染在 background-origin: padding-box 区域，如果父容器高度为 auto、内部又没内容撑开，那实际渲染高度就是 0 —— 图自然看不见，更别说 cover 了。
- 容器没有设置
height或min-height，且子元素未触发 BFC 或未撑高 - 背景图设在伪元素（如
::before）上，但伪元素没设content: ""和显式尺寸 - 父级存在
overflow: hidden且子元素用负 margin 拉伸，导致裁剪区域异常 - 使用了
background-attachment: fixed，此时cover会相对于视口计算，而非容器
确保容器有可计算尺寸的实操方式
让 background-size: cover 正常工作的前提，是浏览器能算出“容器多大”。不能依赖内容自动撑开时，就得手动干预。
- 给容器加
height: 100vh（全屏）或min-height: 100vh（至少一屏） - 若容器在 Flex/Grid 布局中，确认父容器已设
display: flex或display: grid，且自身没被flex: 0锁死尺寸 - 避免仅靠
padding撑高：padding 不影响background-size的计算基准，它仍按 content box 算 - 调试时临时加
outline: 1px solid red，看容器真实渲染区域是否符合预期
background-size: cover 和 contain 的关键区别
cover 和 contain 都缩放图片，但目标完全不同：前者保证填满整个背景区域（可能裁剪），后者保证整张图完整可见（可能留白）。选错就会觉得“图片没变大”或“边缘被切掉”。
-
cover：等比缩放图片，直到图片的宽 *或* 高 ≥ 容器的宽 *或* 高，再居中裁剪。适合 banner、登录页背景 -
contain：等比缩放图片，直到图片的宽 *和* 高 ≤ 容器的宽 *和* 高，不裁剪。适合图标、徽标类小图 - 两者都依赖容器尺寸；若容器宽高比和图片不一致，
cover必然裁剪，这是设计行为，不是 bug
div.hero {
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh; /* 关键：提供明确高度 */
width: 100%;
}响应式下 cover 表现异常怎么办
图片在 PC 上正常，在手机上突然偏移或裁剪过度？问题往往出在 background-position 默认值或媒体查询遗漏。
立即学习“前端免费学习笔记（深入）”；
-
background-position默认是0% 0%（左上角），不是center center；没写明就容易偏 - 不同断点下，容器宽高比变化大（比如横屏 banner 变成竖屏卡片），
cover裁剪区域会动态重算，需配合background-position微调 - 部分安卓 WebView 对
background-size: cover解析有延迟，可加transform: translateZ(0)强制硬件加速 - 不要用
width: 100vw+height: 100vh组合做全屏背景——滚动条宽度会导致水平溢出，改用100%或100dvh（支持较新）
真正卡住的点，往往不是 cover 写得对不对，而是你根本不知道容器此刻有多大。先用开发者工具的“Computed”面板查 height 和 background-size 的最终计算值，比反复改 CSS 更快。
