CSS Sprite使用详解

CSS Sprite是一种将多个小图片合并成一张大图片的技术，通过CSS的background-position属性来控制显示的位置，从而减少HTTP请求次数，提高页面加载速度。本攻略将详细讲解CSS Sprite的使用方法，包括制作Sprite图、CSS代码的编写、应用Sprite图的方法等，并提供两个示例说明。

1. 制作Sprite图

制作Sprite图需要将多个小图片合并成一张大图片。可以使用Photoshop等图像处理软件来制作Sprite图，也可以使用在线工具来制作。下面是一个使用在线工具制作Sprite图的示例：

打开https://www.toptal.com/developers/css/sprite-generator网站。
点击“Upload Images”按钮，选择要合并的小图片。
点击“Generate Sprite”按钮，生成Sprite图。
下载生成的Sprite图。

2. CSS代码的编写

在CSS中，使用background-image和background-position属性来应用Sprite图。background-image属性用于设置背景图片，background-position属性用于设置背景图片的位置。例如：

.sprite {
  background-image: url(sprite.png);
  background-position: -10px -20px;
  width: 50px;
  height: 50px;
}

上述代码中，使用了名为sprite.png的Sprite图，并将其位置设置为-10px -20px，同时设置了元素的宽度和高度为50px。

3. 应用Sprite图的方法

应用Sprite图的方法有两种，分别是使用CSS的background-position属性和使用CSS的伪类。

3.1. 使用CSS的background-position属性

使用CSS的background-position属性来应用Sprite图，需要计算每个小图片在Sprite图中的位置，并将其设置为background-position属性的值。例如：

.sprite1 {
  background-image: url(sprite.png);
  background-position: -10px -20px;
  width: 50px;
  height: 50px;
}

.sprite2 {
  background-image: url(sprite.png);
  background-position: -70px -20px;
  width: 50px;
  height: 50px;
}

上述代码中，使用了两个不同的background-position值来显示Sprite图中的不同小图片。

3.2. 使用CSS的伪类

使用CSS的伪类来应用Sprite图，需要将Sprite图设置为元素的背景图片，并使用伪类来设置元素的宽度和高度。例如：

.sprite {
  background-image: url(sprite.png);
}

.sprite:before {
  content: "";
  display: inline-block;
  width: 50px;
  height: 50px;
  background-position: -10px -20px;
}

上述代码中，使用了:before伪类来设置元素的宽度和高度，并将background-position属性设置为Sprite图中的位置。

4. 示例说明

4.1. 使用CSS的background-position属性示例

下面是一个示例，演示了如何使用CSS的background-position属性来应用Sprite图。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Sprite Example</title>
  <style>
    .sprite1 {
      background-image: url(sprite.png);
      background-position: -10px -20px;
      width: 50px;
      height: 50px;
    }

    .sprite2 {
      background-image: url(sprite.png);
      background-position: -70px -20px;
      width: 50px;
      height: 50px;
    }
  </style>
</head>
<body>
  <h2>CSS Sprite Example</h2>
  <div class="sprite1"></div>
  <div class="sprite2"></div>
</body>
</html>

上述代码中，使用了两个不同的background-position值来显示Sprite图中的不同小图片。

4.2. 使用CSS的伪类示例

下面是另一个示例，演示了如何使用CSS的伪类来应用Sprite图。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Sprite Example</title>
  <style>
    .sprite {
      background-image: url(sprite.png);
    }

    .sprite:before {
      content: "";
      display: inline-block;
      width: 50px;
      height: 50px;
      background-position: -10px -20px;
    }
  </style>
</head>
<body>
  <h2>CSS Sprite Example</h2>
  <div class="sprite"></div>
</body>
</html>