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 做全屏遮罩层：
<div id="bg-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 就只是在“几像素高”的容器里缩放，再大的图也看不出效果。
