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;
}本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
