background-size: cover 必须配 height: 100vh，否则背景图因容器无显式高度而仅显示顶部一像素；ios safari 中 vh 会随地址栏收放跳变，需加 min-height: 100vh 缓冲。
background-size: cover 为什么必须配 height: 100vh
不设高度，背景图大概率只显示顶部一像素高——因为 background-image 默认不撑开容器，父元素若没显式高度，就按内容高度（可能为 0）渲染。height: 100vh 是最直接的解法，让容器占满视口垂直空间；但要注意 iOS Safari 地址栏收放会导致 vh 值跳变，可加 min-height: 100vh 缓冲。
常见错误：height: 100% 在 html 或 body 上无效，除非它们的父级（即根节点）也设了高度；而 html 和 body 默认不继承视口高度。
- 别把全屏背景塞进
.container：它带max-width和左右padding，会切掉上下边缘 - 推荐挂载点：直接用
body，或.container-fluid（Bootstrap）、div.fullscreen（自定义类） - 若嵌套在
.carousel-item等组件内，必须确保该元素自身有height: 100vh且无padding干扰
cover 和 contain 的实际表现差异在哪
background-size: cover 强制等比缩放，使图片的「最小边」刚好填满容器，另一方向溢出裁剪；background-size: contain 则让「最大边」刚好贴合容器，整张图完整可见，但四周常留白。
选哪个取决于设计意图：
- 全屏英雄区、Banner 图 → 用
cover，牺牲边缘保主体，配合background-position: center center锚定视觉中心 - 产品展示页、证件照预览等需完整呈现内容的场景 → 用
contain，但要预留空白区域的布局余量 - 小图放大后模糊？这不是
cover的问题，而是原图分辨率不够；建议背景图原始尺寸 ≥ 1920×1080
移动端裁剪偏移怎么微调
默认 background-position: center center 在手机竖屏下可能把人脸/Logo 切掉一半，这时不能靠 JS 动态算位置，要用媒体查询覆盖：
@media (max-width: 768px) {
.hero-bg {
background-position: center 30%;
}
}
百分比值表示图片中对应位置对齐容器的对应百分比位置（如 center 30% = 图片垂直方向 30% 处对齐容器垂直居中线），比像素值更可靠。
- 避免用
background-attachment: fixed在移动端：iOS Safari 渲染不稳定，滚动卡顿或错位 - 降级写法：
@media (max-width: 768px) { .hero-bg { background-attachment: scroll; } } - 如果必须保留视差效果，改用
transform: translateZ(0)触发硬件加速，比fixed更稳妥
如何让背景图加载更快又适配高清屏
纯 CSS 的 background-image 不支持 srcset，所以没法像 <img> 那样原生切换多分辨率资源。但有两个务实路径：
- 用
<picture></picture>+position: absolute模拟背景图：把<picture></picture>放在容器内，设top: 0; left: 0; width: 100%; height: 100%; z-index: -1;，再给内部<img>加object-fit: cover，这样就能用srcset和sizes - 服务端根据 UA 或 DPR 注入不同背景图 URL（如通过模板变量
{{ bg_image_2x }}），前端只负责渲染 - 静态资源层面：导出 WebP 格式（体积小 30%+），并用
loading="lazy"对非首屏背景图容器做懒加载（需配合 IntersectionObserver polyfill）
真正容易被忽略的是：背景图的语义缺失。它无法添加 alt，也不被屏幕阅读器识别，关键信息别只靠背景图传达——文字层、SVG 装饰、伪元素渐变等辅助手段得跟上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
