css sprites

/* CSS Sprites 示例 */

/* 假设我们有一个包含多个图标的大图片 sprites.png */
sprites {
  background-image: url('sprites.png');
  background-repeat: no-repeat;
}

/* 第一个图标 */
.icon-home {
  width: 32px;
  height: 32px;
  background-position: 0 0;
}

/* 第二个图标 */
.icon-search {
  width: 32px;
  height: 32px;
  background-position: -32px 0;
}

/* 第三个图标 */
.icon-user {
  width: 32px;
  height: 32px;
  background-position: -64px 0;
}

解释说明

1. 背景图片：我们使用 background-image 属性将大图片 sprites.png 设置为背景图片。
2. 不重复背景：使用 background-repeat: no-repeat; 确保背景图片不会重复显示。
3. 图标定义：每个图标通过 background-position 属性来指定其在大图片中的位置。例如，icon-home 的位置是 (0, 0)，而 icon-search 的位置是 (-32px, 0)，表示它在大图片中向左偏移了 32 像素。

通过这种方式，可以减少 HTTP 请求次数，提高网页加载速度。