应使用 background-size: cover；它保持图片宽高比并裁剪边缘以完全填满容器，避免拉伸变形，但需确保 html 和 body 高度为 100% 且慎用 background-attachment: fixed。
background-size 用哪个值才能让图片铺满整个页面
直接设 background-size: 100% 100% 看似合理，但实际会拉伸变形——尤其当窗口宽高比和图片不一致时。真正可靠的方案是 background-size: cover：它保持图片比例，裁剪边缘，确保容器完全被填满。
-
cover适合做全屏背景图，比如首页 Banner，优先保证“无空白” -
contain会完整显示整张图，但可能留白，适合需要看清全部内容的场景（如图表、示意图） - 避免用
100% 100%或100vw 100vh，它们强制拉伸，失真明显 - 如果图本身分辨率低，
cover放大后容易模糊，得提前准备高清图（至少 1920×1080）
为什么加了 background-size 还是没生效
常见原因是父容器没高度，或者背景图被其他样式覆盖。浏览器默认 body 高度只撑开内容区域，不是视口高度。
- 必须给
html和body同时设height: 100%，否则100vh或cover在body上无效 - 检查是否写了
background-attachment: fixed—— 它会让cover在滚动时表现异常，尤其在 Safari 中 - 确认没有其他 CSS 规则（比如某个 class 的
background简写覆盖了background-size） - 用浏览器开发者工具的“Computed”面板直接查
background-size是否被计算为期望值，别只看 Styles 面板
移动端适配时 background-size 表现不一致
iOS Safari 对 background-size: cover 的解析更严格，尤其配合 background-attachment: fixed 时容易失效或闪烁。
- 移除
fixed是最稳妥的解法；如必须视差效果，改用transform: translateZ(0)触发硬件加速，再配合 JS 滚动监听模拟 - 安卓 WebView（尤其旧版）对
cover支持良好，但部分定制 ROM 浏览器会忽略background-origin导致裁剪错位 - 小屏设备上，图片若太宽（比如 3840px），加载慢且内存占用高，建议用
@media加载不同尺寸图：background-image: url(img/bg-1200.jpg)配合min-width: 1200px
想让背景图随窗口缩放实时重算尺寸，但 background-size 本身不触发重绘
background-size 是静态声明，不会响应式重算。所谓“随窗口缩放”，其实是浏览器自动重新应用该值，但前提是容器尺寸确实变了。
立即学习“前端免费学习笔记（深入）”；
- 如果容器用了
max-width或flex布局，但高度没变，cover就不会重新裁剪 - 不要试图用 JS 监听
resize然后反复改style.backgroundSize—— 性能差，且多数情况纯属多余 - 真正需要动态控制时（比如根据设备像素比切换图源），用
picture+srcset更合适，背景图不是它的设计场景 - 极少数必须 JS 干预的情况（如 Canvas 覆盖层需同步缩放），应监听
resize后只更新依赖尺寸的逻辑，而非重设background-size
最常被忽略的是 html 和 body 的高度继承链，以及 background-attachment: fixed 在移动端的兼容性陷阱。这两个点不处理，其他设置都白搭。
