background-size: cover本身不拉伸图片，所谓“拉伸”实为裁剪错位或容器高度失控导致的视觉误判；必须配合min-height: 100vh、background-repeat: no-repeat和background-position: center center三行CSS，并确保高度链完整、定位精准，才能真正生效。
直接用 background-size: cover 配合 min-height: 100vh 和相对路径，90% 的自适应背景图需求就能跑通；但图片不显示、裁错位置、移动端失效，几乎都卡在这三处。
为什么 background-image 设置了却完全看不见
不是代码写错，而是浏览器根本没渲染出来——最常见两个原因：
- 容器没有高度：比如只给
body或.hero-bg设了背景图，但没设min-height，而页面又没内容，body高度就是 0 - 路径相对于 CSS 文件，不是 HTML 文件：CSS 在
/css/main.css，图在/images/bg.jpg，就得写url("../images/bg.jpg")，写成./images/bg.jpg就 404 - 本地双击打开
index.html（file://协议）：Chrome/Firefox 会拦截图片请求，DevTools Network 面板里能看到net::ERR_FILE_NOT_FOUND，必须起本地服务（如python3 -m http.server）
快速验证：给目标元素加临时样式 border: 1px solid red，看它有没有渲染出尺寸。
cover 和 contain 怎么选，以及为什么裁掉了人脸
cover 和 contain 都保持宽高比，但缩放逻辑完全不同：
立即学习“前端免费学习笔记（深入）”；
-
cover：等比缩放到「短边刚好撑满容器」，多余部分裁剪——适合横幅、氛围图，但手机竖屏下容易切掉人物头部 -
contain：等比缩放到「长边刚好贴住容器边缘」，四周可能留白——适合 Logo、带文字的示意图 - 裁错位置？必须配
background-position: center center；若构图偏上（比如人脸在图上 1/3 处），就改用background-position: top center - 绝对别用
100% 100%：强制拉伸必失真，人像/文字图一眼假
移动端 background-attachment: fixed 为什么失效
iOS Safari 和多数安卓 WebView 基本不支持 background-attachment: fixed，不是你代码问题，是渲染引擎限制——滚动时卡顿、闪烁、甚至背景直接消失。
- 解决方案很简单：移动端默认就用
scroll（即不写这一行） - 真要视差效果，用 JS 控制
transform: translateY()或position: sticky模拟，别绑死fixed + cover - 如果用了
@media切换图片源，也别在移动端媒体查询里加fixed，纯浪费
如何真正响应不同屏幕宽度换图源
CSS 不支持像 <picture></picture> 那样的优雅降级，但可以用媒体查询按断点切换 background-image：
- 小屏用压缩版：
@media (max-width: 768px) { .hero-bg { background-image: url("../images/bg-mobile.jpg"); } } - 注意：浏览器会下载所有匹配的背景图，哪怕当前断点只用其中一个；想彻底避免，得用 JS 按需加载
- WebP/AVIF 图片无法 CSS fallback，服务端根据
Accept头返回更可靠；前端检测可加document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') !== -1 - Linux 服务器大小写敏感：
bg.jpg≠BG.JPG，开发时不报错 ≠ 上线能用
最常被忽略的是：所有这些都依赖容器有明确尺寸和路径正确，其他技巧再炫，这两条塌了就全白搭。
