CSS 图像拼合技术

图像拼合（CSS Sprites） 是把多张的小图（如图标、按钮状态）合并到一张大图里，通过 background-image 和 background-position 在元素上只显示其中某一块，从而减少请求次数、提升加载性能。常用于图标、按钮状态、小装饰等。

基本思路

1. 准备一张拼合图（如 icons.png），上面按格子排好多个小图。
2. 给元素设固定宽高（与小图尺寸一致）、background-image 为这张大图。
3. 用 background-position 的负值「偏移」大图，让需要的那一块出现在元素可视区域内。
4. 设 background-repeat: no-repeat，避免重复。

---

示例：一张图里多个图标

假设 icons.png 是 200px × 100px，上面横向排了 4 个 50×50 的图标：

• 第 1 个：0 0
• 第 2 个：-50px 0
• 第 3 个：-100px 0
• 第 4 个：-150px 0

.icon {
  width: 50px;
  height: 50px;
  background-image: url("icons.png");
  background-repeat: no-repeat;
}

.icon-home   { background-position: 0 0; }
.icon-user   { background-position: -50px 0; }
.icon-setting { background-position: -100px 0; }
.icon-help   { background-position: -150px 0; }

原理：背景图默认从元素左上角 (0,0) 开始贴；background-position: -50px 0 表示把大图向左移 50px，这样元素露出的就是大图的第二块 50×50 区域。

---

两行多列时

若拼合图有多行，需要同时设垂直偏移。例如第二行从垂直 50px 开始：

.icon-mail {
  background-position: -100px -50px;
}

---

与 hover 等状态结合

同一张拼合图里可以放「默认」和「悬停」两帧，通过改变 background-position 切换：

.btn {
  width: 120px;
  height: 40px;
  background-image: url("buttons.png");
  background-repeat: no-repeat;
  background-position: 0 0;
}

.btn:hover {
  background-position: 0 -40px;  /* 悬停用下一行图 */
}

---

小结

• 拼合图：多张小图合并成一张，用 background-image 引用。
• 显示某一块：元素设宽高 → background-position 用负值偏移大图，使目标区域对准元素框。
• background-repeat: no-repeat 避免重复。
• 适合图标、按钮状态等小图，可减少 HTTP 请求；大图或复杂布局也可用，但要算好坐标。

下一节学习 CSS 媒体类型。