17370845950

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;
}

• 这个 div 必须 position: fixed 且 z-index: -1，才能不遮挡内容
• 不用依赖 html 高度，天然兼容所有设备
• 注意：若页面有 transform 或 perspective，可能影响 fixed 定位，需额外测试

最常被忽略的是 html { height: 100% } 这一行——少了它，cover 就只是在“几像素高”的容器里缩放，再大的图也看不出效果。