17370845950

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 更快。