在 CSS 中实现图像精灵

图像精灵用于许多使用多个图像的 Web 应用程序。与其将每个图像作为单独的图像文件包含，不如将它们作为单个图像发送，这样可以更节省内存和带宽；使用背景位置作为区分同一图像文件中各个图像的方法，从而减少 HTTP 请求数。

注意：使用 HTTP/2 时，使用多个小型请求实际上可能更节省带宽。

实施

假设每个具有类 toolbtn 的项目都给定一个图像

css
.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

可以在背景中的 url() 后添加背景位置，也可以作为 background-position 添加。例如

css
#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}

这将使 ID 为 btn1 的元素的背景图像的起始点向左滑动 20 像素，而 ID 为 btn2 的元素的背景图像的起始点向左滑动 40 像素（假设它们都分配了类 toolbtn 并且受上面图像规则的影响）。

同样，您也可以使用以下方法创建悬停状态：

css
#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}

另请参阅