如何使用精灵图

用精灵图可以将多个小图片合并为一张大图片，减少了请求次数，提高了网页的加载速度。步骤如下：
1. 将需要合并的小图片按照一定的规则排列在一张大图片上，如下图所示：
2. 在 CSS 中定义每个小图片的位置和大小，如下：

css
.icon1 {
  background: url(sprite.png) no-repeat -20px -20px;
  width: 20px;
  height: 20px;
}
.icon2 {
  background: url(sprite.png) no-repeat -40px -20px;
  width: 20px;
  height: 20px;
}

3. 在 HTML 中使用定义好的类名即可：

html

这样就可以实现使用精灵图了。