解释 css sprites,如何使用

css sprites是一种网页优化技术，它将多个小图片合并在一张大图片中，然后通过css来控制图片的显示位置来实现不同的效果。

使用css sprites的好处在于，将多个小图片合并在一张大图片中，可以减少浏览器对服务器的请求数，从而提高网页的加载速度。

使用css sprites的方法如下：

1. 制作css sprites图片，将多个小图片合并在一张大图片中。

2. 在网页的css文件中引入这张大图片。

3. 使用css的background-position属性来控制图片的显示位置，从而实现不同的效果。

例如，如果有一张css sprites图片，包含了3张小图片，分别是小图片A、B、C，我们可以使用如下代码来实现不同的效果：

.icon-A {
    background-position: 0 0;
}

.icon-B {
    background-position: 0 -20px;
}

.icon-C {
    background-position: 0 -40px;
}

在html代码中，我们可以使用如下代码来显示图片A：

<div class="icon-A"></div>

在html代码中，我们可以使用如下代码来显示图片B：

<div class="icon-B"></div>

在html代码中，我们可以使用如下代码来显示图片C：

<div class="icon-C"></div>