background-size: cover + height: 100vh + background-position: center center 是唯一可靠方案；其他写法在 ios safari、旧 android 或缩放下易失效，因 cover 等比缩放裁剪并确保至少一方向撑满，配合居中防关键内容被切，100vh 直取视口高度避免继承问题，且需规避 container 限制与 fixed 等兼容性陷阱。
直接用 background-size: cover + height: 100vh + background-position: center center，是唯一可靠起点；其他写法在 ios safari、旧 android 或缩放页面下大概率翻车。
为什么 background-size: 100% 100% 不行
它强制拉伸图片宽高分别填满容器，完全不保持原始比例。人像变胖、文字扭曲、横幅变形都是典型表现。而 background-size: contain 会留白，根本达不到“全屏”效果。
-
cover是等比缩放后裁剪，确保至少一个方向撑满容器，视觉上最接近设计意图 - 必须配
background-position: center center，否则裁剪区域偏移，关键内容（比如人脸）可能被切掉 - 别信“只加
cover就够了”的说法——没设高度、没居中、没处理父容器限制，照样白搭
height: 100vh 是刚需，不是可选项
height: 100% 依赖父元素高度，但 html 和 body 默认不占满视口，结果就是背景图只有一小条。用 100vh 跳过所有继承链，直取当前视口高度。
- 移动端 Safari 有时把地址栏高度算进
vh，导致底部短暂空白；可用min-height: 100vh缓解 - 如果背景图放在 Bootstrap 的
.container或.row里，注意它们自带 padding 或 max-width，会截断高度 —— 改用.container-fluid或直接挂到body上更稳妥 - 慎用
background-attachment: fixed：iOS Safari 对它支持不稳定，滚动时易卡顿或错位
用 ![]()
标签实现全屏时的硬性条件
当必须用 <img>（比如需要 srcset、SEO、JS 动态换图），就不能套背景图那套逻辑了。常见错误是加了 position: absolute 却漏掉 top: 0; left: 0，或者没设 z-index: -1 导致盖不住内容。
- 结构必须是：
<div class="full-bg"><img src=""></div>，对.full-bg设position: relative; height: 100vh; overflow: hidden -
<img>本身设position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%)，比object-fit: cover兼容性更好（IE11 都支持） - 务必加
img { display: block; }，否则图片下方可能多出几像素空白（来自 inline 元素的基线对齐）
移动端和 Safari 的几个隐形坑
这些细节不显眼，但上线后最容易被用户截图投诉：“iPhone 上图片缺了一块”“iPad 横屏留白”。
- iOS Safari 在地址栏收起/展开时会重算
vh，导致背景图高度跳变；min-height: 100vh可缓解，但无法根治，需配合 JS 监听resize重设 - 某些安卓 WebView 对
background-attachment: fixed渲染异常，建议默认关闭，仅 PC 端按需开启 - 如果页面有横向滚动（比如超宽表格），
100vh仍以视口为基准，不会随滚动条变化 —— 这是预期行为，不是 bug
真正难的不是写对这三行 CSS，而是意识到：全屏背景图从来不是纯样式问题，它卡在视口计算、设备差异、加载时序、甚至浏览器 UI 变化之间。每次改完记得真机连 Safari 开发者工具调试，模拟地址栏收起状态看一眼。
