CSS 图像拼合技术

拼合（Sprites）指把许多小图标拼进同一张图片文件里，再借助 background-position 只显示需要的部分。这样做网页只需下载一次图片，能大幅减少 HTTP 请求，让页面加载更快——是优化网站的经典技巧。

为什么要拼合

网页上每个独立的图片都会产生一次 HTTP 请求，图标越多请求越多、加载越慢。把图标拼成一张"雪碧图"后：

• 小图片合并为一张大图，请求数从 N 次降为 1 次；
• 图片总体积通常更小，配合浏览器缓存，回访时几乎零成本；
• 鼠标悬停换图标时不用切换图片文件，显示无闪烁。

拼合图与 background-position

把目标图标当作背景图，用 background-position 把大图平移到对应小图的位置：

.icon {
  width: 32px;                          /* 小图标的显示尺寸 */
  height: 32px;
  background-image: url("icons.png");   /* 大拼合图 */
  background-repeat: no-repeat;         /* 只显示一次 */
}
.icon-home   { background-position: 0 0; }      /* 第 1 个图标 */
.icon-search { background-position: -32px 0; }  /* 左移 32px：第 2 个 */
.icon-user   { background-position: -64px 0; }  /* 左移 64px：第 3 个 */

原理：元素宽高固定为小图标大小，背景图向左、向上平移，让目标图标恰好落在元素"窗口"内。

悬停切换图标

把两种状态的图标上下排在同一张图上，切换时只需改 y 坐标：

.nav-home {
  width: 32px;
  height: 32px;
  background: url("icons.png") 0 0 no-repeat;   /* 常态图标 */
}
.nav-home:hover {
  background-position: 0 -32px;                 /* 悬停：下移到第二行图标 */
}

运行效果：鼠标悬停时瞬间"换"成高亮图标，没有新的图片请求，也没有加载延迟。

如何生成与测量拼合图

手工拼图容易出错，实践中常用工具辅助：

1. 用 Photoshop、SpriteCow 或在线雪碧图生成器把小图拼成一张；
2. 记录每个小图在大图中的坐标 (x, y) 与宽高；
3. 坐标多为负数偏移，写法是 background-position: -x -y；
4. 图标按相同尺寸、规则网格排列最省事，测量也更简单。

/* 示例：16x16 的网格图标，取第 (2,1) 格 */
.icon-edit {
  width: 16px;
  height: 16px;
  background: url("icons.png") -32px -16px no-repeat;
}

小结

图像拼合把多个小图标装进一张大图，用 background-position 定位显示，从而减少 HTTP 请求、加速加载并让 hover 换图无闪烁。图标多且静态时非常划算，是前端性能优化的入门手艺之一。