background-size: cover未覆盖是因容器尺寸为0；需设min-height: 100vh、background-position: center、background-repeat: no-repeat，并确保父容器有高度。
写了 background-size: cover 却没盖满，不是 CSS 失效，而是容器本身没尺寸——cover 只缩放图片去填容器，不负责把容器“撑大”。
为什么 background-size: cover 看起来没覆盖容器
常见现象：背景图只铺左上角、上下/左右留白、甚至整个背景消失。根本原因不是 cover 有问题，而是目标元素的 height 或 width 计算结果为 0px（比如父容器没设高、元素是 display: inline、Flex 子项没继承高度）。
实操建议：
- 用浏览器 DevTools 查看该元素的 Computed height，确认是否为
0px或远小于预期 - 若用在
<body>上，必须同时设html, body { height: 100%; margin: 0; }，否则100%无参照 - 用
min-height: 100vh比height: 100vh更安全，避免内容超长时被截断 - Flex 容器中，子项默认不拉伸，需显式加
align-items: stretch或height: 100%
background-size: cover 必须配齐的三个声明
单写 background-size: cover 不够。它依赖容器尺寸、背景原点和重复行为共同生效。
立即学习“前端免费学习笔记（深入）”；
最小可用组合：
section {
min-height: 100vh;
background-image: url("bg.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
说明：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
min-height: 100vh是容器尺寸基础，100dvh可替代100vh解决 iOS Safari 地址栏压缩问题 -
background-position: center防止构图偏移；若关键内容在顶部（如人像），改用center top -
background-repeat: no-repeat必须写，否则小图会被平铺，cover失效
cover 和 contain 的实际区别与误用场景
二者都等比缩放，但裁剪逻辑相反，选错直接导致留白或关键内容被切。
关键差异：
-
cover：缩放到「短边刚好覆盖容器」，长边溢出 → 全屏 Banner、登录页背景适用 -
contain：缩放到「长边刚好贴合容器」，短边留空 → Logo、证件照、图表适用 -
100% 100%是强制拉伸，变形+模糊，生产环境应避免
典型误用：
- 全屏 Banner 用了
contain→ 图片居中但四周留白 - 人物背景用了
cover但没调background-position→ 脸被裁掉
移动端和 Safari 下容易忽略的坑
现代浏览器基本支持 cover，但真机测试仍常翻车。
注意点：
- iOS Safari（尤其微信内置浏览器）对
background-attachment: fixed+cover组合支持差，滚动时背景可能“跳帧”或错位 - 老版 Safari（iOS 6–9）在 Flex 容器中解析
background-size异常，必要时加-webkit-background-size: cover - 小屏下
cover裁剪更狠，建议用媒体查询微调：@media (max-width: 480px) { background-position: center 20%; } - 别依赖图片构图中心 = 视觉焦点；设计稿里标出“安全区”，再用
background-position锚定
背景图是否真正覆盖，从来不是一行 CSS 能决定的事——容器尺寸、定位偏移、设备渲染差异，三者缺一不可。最常漏掉的，永远是那个没设高的父容器。
