cover失效主因是容器尺寸错误而非属性本身失效，需确保html/body高度撑满、清除默认边距、正确设置viewport，并配合background-position与构图安全区控制裁剪。
background-size: cover 在移动端显示不全，根本不是 cover 本身失效，而是它被塞进了一个“尺寸错误的盒子”里。
为什么写了 cover 还是只显示一小块？
浏览器不会凭空知道“全屏”多大——cover 只负责等比缩放图片去填满容器，但容器自己没撑开，它就只能缩在角落。常见原因包括：
-
html和body没设height: 100%或min-height: 100vh，导致它们高度为 0 或仅包裹内容 - 漏了
margin: 0，body默认有 8px 外边距，背景直接被挤出视口边缘 - 背景设在某个
div上，而该div是 flex 子项且未显式设高，或被align-items: flex-start拉偏 - 父容器有
padding或border，cover按盒模型总尺寸计算，裁剪位置意外偏移
为什么关键内容总被切掉？
cover 的逻辑是「等比缩放 → 填满 → 裁剪多余部分」，裁哪边，取决于图片和容器宽高比的差值。移动端屏幕宽高比差异大（比如 iPhone 14 Pro 是 19.5:9，部分安卓是 20:9 或更窄），而图片通常是 16:9 或 4:3，必然上下或左右被切。
- 默认锚点是
center center，但图片构图中心未必是你想保留的脸/按钮/Logo —— 必须显式写background-position: center center（哪怕看起来默认就是） - 人物/主体必须落在图片中心 60% 区域内，这是最稳妥的“安全区”
- 避免用超宽图（如 3840×1080）做全屏背景，竖屏手机会疯狂裁顶部和底部
- 用
background-size: contain先对比：如果它能完整显示但留白，说明你其实不需要填满，只是误判了需求
为什么加了 cover 还是留白或错位？
这不是 CSS 不支持，而是 viewport 或设备渲染逻辑干扰了“容器尺寸”的计算。
- 漏写
<meta name="viewport" content="width=device-width, initial-scale=1">，iOS Safari 会以桌面宽度（约 980px）渲染，cover实际作用在伪宽屏上 - 用了
100vh做容器高度：iOS Safari 地址栏收起/弹出会动态改变vh值，造成闪动或留白；改用min-height: 100vh+height: 100%更稳 - 页面存在横向溢出（比如子元素
white-space: nowrap或固定宽表格），导致body宽度变大，cover按错误宽度缩放 - 某些老安卓 WebView 对
cover渲染延迟，可加transform: translateZ(0)触发硬件加速
怎么写出真正可靠的全屏背景？
别依赖单个 cover，靠组合控制才稳：
- 把背景直接设在
html上：html { background: url("bg.jpg") no-repeat center center / cover; } - 强制根容器撑开：
html, body { margin: 0; padding: 0; height: 100%; } - 高清屏模糊？别只放一张图，用
image-set()：background-image: image-set("bg.jpg" 1x, "bg@2x.jpg" 2x); - 关键内容保不住？换思路：用
<img>+object-fit: cover，配合aspect-ratio控制容器比例，比纯 background 更可控
最易被忽略的一点：cover 的裁剪结果不可预测，除非你同时控制图片构图、容器尺寸、锚点位置和设备视口基准——少一个，就可能在某台手机上突然切掉登录按钮。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
