background-image 裁剪需 background-size 与 background-position 协同控制，background-clip 对背景图无裁剪作用；常用 cover 实现等比填满，再用 background-position 微调；百分比定位易误判参照系，推荐像素值；mixin 应专注定位逻辑，参数顺序须匹配 css 原生习惯。
background-image 裁剪必须配合 background-size 和 background-position 才生效
单纯写 background-image 不会自动裁剪，浏览器默认平铺或拉伸。裁剪本质是控制“图怎么放进容器里”，靠的是三属性协同：background-size（缩放）、background-position（偏移）、background-clip（裁剪范围）。其中 background-clip 默认是 border-box，对背景图本身无裁剪作用；真正影响显示区域的是前两者。
常见错误现象：
– 图片只显示左上角一小块，其余被截掉 → background-size 设太大 + background-position 没调准
– 图片模糊或拉伸变形 → background-size 用了 100% 100% 而非 cover 或 contain
– 在 Retina 屏上出现像素断裂 → 忘了适配高倍图，没用 background-size: 50% 50% 配合 2x 图
- 优先用
background-size: cover实现等比缩放+填满，再用background-position微调可见区域 - 若需精确像素级裁剪（比如 sprite 图），必须用具体数值，如
background-size: 200px 300px+background-position: -20px -40px - 避免混用
background简写和单独属性——简写会重置未声明项，可能意外覆盖background-position
Less Mixin 封装裁剪逻辑时，参数顺序要匹配 CSS 原生习惯
很多人写 Mixin 把 offset 写在 size 前面，结果调用时总记错顺序。CSS 原生是先 background-size 后 background-position，Mixin 也该照着来，否则团队协作或后期维护容易出错。
使用场景：
– 多个组件共用同一张大图的不同区域（如 icon sprite）
– 响应式 Banner 图在不同断点下展示不同局部
– 按钮 hover 状态切换背景图位置
示例（推荐写法）：
.bg-sprite(@size-x: 100px, @size-y: 100px, @pos-x: 0, @pos-y: 0) {
background-size: @size-x @size-y;
background-position: @pos-x @pos-y;
}
- 参数命名带单位（如
@size-x: 100px），避免传入无单位数字引发计算歧义 - 不默认设
background-image—— Mixin 应专注“定位逻辑”，图片路径由调用方决定，更灵活 - 如果要支持
cover/contain这类关键字，参数类型得用~"cover"或守卫判断，别硬塞字符串进数值计算
background-position 百分比值在裁剪中容易误判参照系
写 background-position: 50% 50% 并不是“把图中心对齐容器中心”，而是“让图的 50% 位置对齐容器的 50% 位置”。当 background-size 改变时，这个“50%”所指的图上坐标就变了——这正是裁剪偏移的核心机制，也是最容易卡住的地方。
常见错误现象：
– 用 50% 50% 居中一张 cover 缩放后的图，结果偏了 → 因为图被缩放后，原图 50% 坐标已不在视觉中心
– 在不同宽高比容器里复用同一组百分比值，裁剪区域飘忽不定 → 百分比始终相对于图自身尺寸，不是容器
- 固定裁剪区域推荐用像素值（
-10px -20px），语义明确、可预测 - 若必须用百分比，先确认
background-size是固定尺寸还是cover；后者下，50% 50%通常才是真居中 - 调试技巧：临时加
background-color: rgba(255,0,0,0.2)，看清图实际铺排范围
高 DPR 屏幕下，Mixin 要预留 2x/3x 图切换能力
直接写 background-image: url(icon.png) 在 Retina 屏上会模糊。但不能简单替换成 @2x 图再调 background-size: 50% 50% —— Less 编译时无法感知设备 DPR，得靠 CSS 媒体查询或 JS 动态注入。
所以 Mixin 的设计重点不是“自动适配”，而是“方便对接适配方案”：
- 参数留出
@image-2x可选字段，主图路径仍由调用方传入，Mixin 只管 position/size - 配合
@media (-webkit-min-device-pixel-ratio: 2)在外部包裹，Mixin 本身不嵌套媒体查询（否则编译后冗余） - 如果项目用 Webpack + url-loader，可用
require('./icon.png')让构建工具自动处理多倍图，Mixin 只处理定位逻辑
裁剪这件事，难点从来不在怎么写那几行 CSS，而在于搞清“图的坐标系”和“容器的坐标系”之间那层映射关系。参数一多，人很容易盯着 Mixin 本身想优化，其实该先画草图，标出原图尺寸、目标区域、缩放比例，再转成代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
