background-size: cover不够用，因其默认居中裁切且不锚定局部；需放大图片（如200% auto）+偏移取景框（如-50px -30px）+容器截断，配合明确高度、no-repeat及避免父级overflow:hidden干扰。
要让背景图只显示指定局部区域（比如左上角人脸、中间建筑），不能只靠 background-size: cover，必须手动控制 background-size 和 background-position，并确保容器有明确高度、禁用平铺、且无父级 overflow: hidden 干扰。
为什么 background-size: cover 不够用
background-size: cover 默认居中裁切，它只保证“填满”，不保证“你想看的那一块在画面里”。比如一张横幅图在手机竖屏上，cover + center center 很可能把人脸直接切掉——这不是参数没写对，而是它的裁剪逻辑本身不支持锚定局部。
- 想精确露出图片左上角 200×200 像素区域？得放大图片再偏移取景框，比如
background-size: 200% auto+background-position: -50px -30px - 用百分比定位（如
20% 30%）时，数值代表“图片上该点对齐容器左上角”，不是“显示区域占比”，容易误判 -
cover和contain都是全自动适配策略，本质和“局部显示”目标冲突
怎么写才能精准裁出想要的局部
核心是“放大图片 → 移动取景框 → 用容器截掉多余部分”。这三步缺一不可。
- 容器必须设
min-height或height（如min-height: 100vh），否则空内容时高度为 0，背景根本不会渲染 - 务必加
background-repeat: no-repeat，漏写会导致小图重复平铺，掩盖你调的定位 - 推荐组合：
background-size: 200% auto（横向放大一倍） +background-position: -100px 0（往左推 100px，把左边区域“拽”进可视区） - 如果用了
border-radius，记得加background-origin: border-box，否则圆角处背景会从 content 区起算，视觉上像被切了一角
为什么 .container-fluid 上加背景图总只显示一小块
因为 .container-fluid 默认不设高度，完全依赖内容撑开。所谓“局部裁剪”，前提是先有一个可裁的框——而它没有。
- 别直接在
.container-fluid上写background-image，套一层自定义容器更稳：<div class="bg-crop"><div class="container-fluid"></div></div> - 在
.bg-crop里设min-height: 100vh、overflow: hidden、background-position等样式 - 图片路径要相对于 CSS 文件位置，不是 HTML 页面位置。CSS 在
/css/main.css，图在/img/bg.jpg，就得写url(../img/bg.jpg)
移动端滚动时背景定位偏移怎么办
加了 background-attachment: fixed 想做视差效果，但在 iOS Safari 和部分安卓浏览器里，background-position 会失效或抖动，尤其配合缩放或滚动时。
- 最稳方案：去掉
fixed，改用position: fixed+z-index: -1的<img>替代背景图（更可控，也绕过所有兼容性坑） - 如果坚持用背景图，避免在 flex 或 grid 容器上同时用
fixed和百分比background-position - 真机调试时，打开 Safari 开发者工具，勾选 “Disable visual viewport” 查看真实渲染行为
裁剪效果崩掉，90% 是因为容器没高度、no-repeat 漏写，或者父级意外带 overflow: hidden——这些硬约束比调 background-position 数值重要得多。
