图片未铺满主因是父容器无高度，需设html和body为height: 100%并清除margin/padding；装饰图用background-image，语义化需求用配object-fit: cover；safari下vh容器需动态适配；高清屏需@2x图或svg替代。
background-size: cover 为什么图片还是没铺满？
多数情况是父容器没高度，body 或 html 默认高度不撑开视口。浏览器渲染时，如果外层没有明确高度，background-size: cover 只能按“内容高度”缩放，而不是屏幕高度。
实操建议：
- 给
html和body同时设height: 100%（注意不是min-height） - 确保根容器（比如
body）没有 margin 或 padding 干扰尺寸计算 - 如果用了 Flex 或 Grid 布局，检查是否意外设置了
align-items: flex-start导致内容区塌陷
用 background-image 还是 img 标签？
纯装饰性背景图选 background-image；需要语义、SEO、响应式懒加载或点击交互的，必须用 <img alt="html5如何页面背景图片自适应屏幕大小" > 标签。
关键区别：
立即学习“前端免费学习笔记（深入）”；
-
background-image不参与文档流，无法被屏幕阅读器识别，也不能设置loading="lazy" -
<img alt="html5如何页面背景图片自适应屏幕大小" >可用object-fit: cover+object-position实现类似cover效果，且天然响应式 - 移动端 Safari 对
background-size: cover在position: fixed元素上偶有重绘异常，<img alt="html5如何页面背景图片自适应屏幕大小" >更稳
移动端 Safari 的 background-size 兼容陷阱
iOS 15.4 之前，background-size: cover 在 vh 单位容器里可能失效——因为 Safari 的视口高度在地址栏收起/展开时会动态变化，但背景图不会重绘。
绕过办法：
- 改用
100vh配合background-attachment: scroll（禁用 fixed） - 监听
resize事件，手动触发element.style.backgroundSize = 'cover'强制刷新（小范围可用） - 更可靠的是用 JS 获取
window.innerHeight动态设内联样式，避开 CSS 解析时机问题
高清屏下背景图模糊？记得配 @2x
CSS 背景图不会自动适配设备像素比，Retina 屏会把 1× 图拉伸渲染，导致发虚。
解决方案有限但有效：
- 准备两套图：
bg.jpg和bg@2x.jpg，用媒体查询切换：
body {
background-image: url('bg.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
body {
background-image: url('bg@2x.jpg');
}
}
- 直接用 SVG 或 CSS 渐变替代位图，彻底避开分辨率问题
- 避免在
background-image中混用blur()滤镜，Safari 渲染性能极差且易糊
最常被忽略的是：很多人以为加了 background-size: cover 就万事大吉，其实它只管缩放逻辑，不管图像源质量、容器尺寸来源、或者设备像素比——这三个点任何一个掉链子，背景图就立刻露馅。
