在 CSS 中实现图片精灵
图像精灵在许多使用多个图像的 Web 应用程序中都有用到。与其将每个图像作为单独的图像文件包含进来，不如将它们作为单个图像发送，这样能更有效地利用内存和带宽；通过使用背景位置来区分同一图像文件中的单个图像，从而减少 HTTP 请求的数量。
注意：当使用 HTTP/2 时，使用多个小的请求实际上可能更节省带宽。
实现
假设给每个类名为 tool-btn 的项目一个图像
css
.tool-btn {
background: url("myfile.png");
display: inline-block;
height: 20px;
width: 20px;
}
背景位置可以作为两个 x, y 值添加到背景中的 <url> 之后，也可以作为 background-position。例如
css
#btn1 {
background-position: -20px 0px;
}
#btn2 {
background-position: -40px 0px;
}
这将使 ID 为 btn1 的元素的背景图像起始点向左滑动 20 像素，ID 为 btn2 的元素的背景图像起始点向左滑动 40 像素（假设它们都分配了 tool-btn 类并受上述图像规则的影响）。
类似地，你也可以通过定位 #btn:hover 来创建悬停状态。