必须配合background-size放大与background-position偏移才能精准裁剪背景图局部区域，如左上角人脸或中间建筑；需确保容器有明确高度、background-repeat: no-repeat，并避免父级overflow: hidden或transform干扰。
background-size 和 background-position 怎么配才控制裁剪区域
要让背景图只显示某一块（比如左上角人脸、中间建筑），不能只靠 background-size: cover，它默认居中裁切。真正可控的组合是：background-size 放大图片，再用 background-position 移动“取景框”，最后靠容器 overflow: hidden 截掉多余部分。
-
background-size: 200% auto→ 宽度放大一倍，留出横向裁切空间 -
background-position: -50px -30px→ 手动往左上偏移，把想露的部分“推”进可视区 -
background-repeat: no-repeat必须加，否则偏移后可能意外平铺 - 如果用百分比定位（如
20% 30%），数值代表图片该点对齐容器左上角，不是“显示区域占比”
为什么 container-fluid 上加背景图总只显示一小块
因为 .container-fluid 默认高度由内容撑开，空的时候高度几乎为 0，背景图根本没地方渲染。所谓“局部显示”，前提是先有明确的框——得给它一个可裁的尺寸。
- 别直接在
.container-fluid上写background-image - 套一层自定义 div，比如
<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 会失效或抖动，尤其配合缩放或滚动时。
- 优先去掉
background-attachment: fixed，改用纯滚动跟随方案 - 如果必须固定，改用
position: fixed+z-index: -1的<img>替代背景图（更可控） - 避免在 flex 或 grid 容器上同时用
fixed和百分比background-position，兼容性风险高 - 测试时打开 Safari 开发者工具，勾选 “Disable visual viewport” 查看真实渲染行为
裁剪样式容易被忽略的三个硬约束
裁剪不是调两个 CSS 属性就完事，底层有三处不满足，整个效果就崩。
- 容器必须有明确高度（
height或min-height），auto或unset下背景图不渲染 -
background-repeat: no-repeat漏写会导致小图重复平铺，掩盖你精心调的定位 - 父级或祖先元素不能有
overflow: hidden或transform（如scale(1.1)），它们会创建新的层叠上下文或裁剪上下文，意外截断你的背景
