想让 background-size: cover 真正实现背景图片全屏显示，前提一定要先设置正确：为 html 和 body 同时添加 height: 100%，并把默认的 margin: 0 清除掉。原因很简单——如果容器本身没有撑满页面高度，CSS 背景图自然无法完整覆盖整个屏幕。到了移动端，更推荐优先使用 height: 100%，而不是 100vh，这样可以尽量避免浏览器地址栏伸缩引发的页面跳动和背景错位问题。
直接使用 background-size: cover 确实是实现 CSS 背景图片铺满全屏最常见的方法，但如果只写这一行，通常很难得到理想效果——问题往往不在这个属性本身，而在于背景所在的容器高度没有被正确撑开。
为什么 background-size: cover 没铺满整个屏幕
在浏览器默认渲染规则中，body 通常只会跟随页面内容高度变化，而 html 元素本身也不会自动等于整个视口高度。这样一来，即使已经设置了 background-size: cover，它也只是把背景图按照当前这个“高度不足”的容器进行缩放，最终看上去当然达不到真正的全屏背景效果。
html和body都必须设置height: 100%（而不是100vh），否则cover缺少可参考的高度基准body默认自带margin，必须手动设置margin: 0，否则页面四周容易出现白边- 背景图片应设置在
html或body上；如果写在某个div里，那它只会铺满该div，不会覆盖整个页面 - 在移动端 Safari 中，地址栏高度会动态变化，
100vh容易产生跳变，使用height: 100%会更稳定
background-size: cover 和 100% 100% 的关键区别
到底该选择哪一种背景图缩放方式，不是单纯看视觉效果，而是取决于页面设计是否允许图片被裁切。
background-size: cover：图片按比例缩放并完全覆盖容器，可能会裁掉上下或左右内容——适合 Banner、首屏大图、氛围背景图background-size: 100% 100%：强制将背景拉伸到容器宽高，图片原始比例会被破坏，容易发生变形——更适合纯装饰图或没有关键信息的图片background-size: contain：图片按比例完整显示，但一定会留白——不适合做全屏背景，更适合 logo、图标等必须完整展示的场景- 如果既想铺满屏幕又想完整保留图片内容，只能考虑
background-size: 100vw 100vh，但要注意这里使用的是vw/vh单位，而不是%
移动端和 Safari 的实际坑点
很多时候并不是 CSS 属性无效，而是移动端视口的计算方式影响了背景全屏显示效果。
- iOS Safari 在地址栏收起或展开时，
100vh的计算值会随之变化，导致背景图突然缩放、抖动或错位 - 部分安卓 WebView 对
100vh的解析并不稳定，实际开发中更建议优先采用min-height: 100vh+height: 100%的组合方案 background-attachment: fixed在 iOS 设备上经常失效，甚至可能带来滚动卡顿，因此需要谨慎使用- 当大尺寸背景图配合
cover使用时，浏览器依然会解码整张图片——在小屏设备加载大图会浪费流量和带宽，建议通过image-set()或媒体查询切换不同分辨率资源
真正最容易被忽视的，其实是 html 和 body 的基础高度设置，以及移动端 viewport 的动态变化影响。这两个关键点如果没有处理好，后续再怎么优化 background-size: cover、背景图片全屏铺满效果，往往也很难达到预期。
