CSS3怎么让背景图铺满整个页面_backgroundsizecover用法【操作】

看不見的法師 2026-01-02 00:00:00 次阅读

background-size: cover 单独使用无效是因为 body 默认高度由内容决定，需设置 html、body { height: 100%; margin: 0; } 并将背景设在 html 上；cover 等比缩放填满容器可能裁剪，contain 则完整显示留白；移动端旧版 iOS Safari 建议用 fixed 遮罩 div 替代。

用 background-size: cover 确实能让背景图铺满整个页面，但默认只作用于元素内容区，不是视口——必须配合 html 和 body 的高度设置才真正全屏。

为什么 `background-size: cover` 单独写没反应？

常见错误是只给 body 设置背景，但 body 默认高度由内容撑开，不是 100% 视口高。浏览器会按 body 的实际高度（可能只有几行文字那么高）来缩放图片，看起来像没生效。

必须让 html 和 body 都占满视口：

html, body {
  height: 100%;
  margin: 0;
}

背景要设在 html 或 body 上（推荐 html，避免滚动条干扰）
background-attachment: fixed 会影响 cover 行为，慎用

`background-size: cover` 和 `contain` 的关键区别

cover 是「等比缩放，完全覆盖容器」，可能裁剪边缘；contain 是「等比缩放，完整显示整张图」，可能留白。全屏背景几乎总是用 cover。

cover：图片宽高比不变，缩放到至少一边填满容器，另一边可能溢出
contain：缩放到最多一边贴边，另一边必有空白
两者都不改变图片原始宽高比，不会拉伸变形

完整可用的全屏背景 CSS 写法

下面这段代码能稳定实现“图随窗口缩放、始终铺满、不重复、居中”：

html {
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

no-repeat 必须加，否则小图会平铺
center center 控制定位，避免图片偏移
如果页面内容超长导致滚动，html 背景仍固定在视口，不会随内容滚动（这是预期行为）
想让背景随内容滚动？把样式移到 body 并加 background-attachment: scroll

移动端适配要注意什么？

iOS Safari 旧版本（iOS 12 及更早）对 html 元素应用 background-size: cover 有兼容问题，稳妥做法是用一个 div 做全屏遮罩层：


#bg-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
  z-index: -1;
}