如何利用HTML的CSS background-size: cover使背景图完全覆盖容器-html教程-PHP中文网

background-size: cover未覆盖是因容器尺寸为0；需设min-height: 100vh、background-position: center、background-repeat: no-repeat，并确保父容器有高度。

如何利用html的css background-size: cover使背景图完全覆盖容器

写了 background-size: cover 却没盖满，不是 CSS 失效，而是容器本身没尺寸——cover 只缩放图片去填容器，不负责把容器“撑大”。

为什么 background-size: cover 看起来没覆盖容器

常见现象：背景图只铺左上角、上下/左右留白、甚至整个背景消失。根本原因不是 cover 有问题，而是目标元素的 height 或 width 计算结果为 0px（比如父容器没设高、元素是 display: inline、Flex 子项没继承高度）。

实操建议：

用浏览器 DevTools 查看该元素的 Computed height，确认是否为 0px 或远小于预期
若用在上，必须同时设 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 锚定