CSS中的图片精灵 | CSS Images: Implementing image sprites in CSS

CSS Images: Implementing image sprites in CSS

图像精灵被用于许多使用多个图像的网络应用程序。将每个图像作为单独的图像文件包含在内，而不是将每个图像作为单独的图像文件包含在内，而是将其作为单个图像发送给内存和带宽更高的应用程序。

实施

假设一个图像被赋予classtoolbtn：

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

背景位置可以在之后添加作为两个X，Y值url()（https://developer.mozilla.org/en-US/docs/Web/CSS/url的背景下，或作为background-position）。例如：

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

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

这将使ID为'btn1'20个像素的元素向左移动，ID为'btn2'的元素向左移动40个像素（假设他们已经toolbtn分配了类并受到上述图像规则的影响）。

同样，您也可以使用以下方式使状态处于悬停状态：

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