CSS Sprite如何工作？

Question

我有3张不同的图片，想使用CSS创建一个精灵。我知道这将减少HTTP请求。但是，我对这个概念完全陌生，对如何处理这个概念一无所知。

对我来说最好的选择是什么？我还看到有一些CSS Sprite生成器，您可以在其中提交图像的.zip并将其组合。

我尝试这样做，但不了解发生了什么。任何有关创建和使用CSS Sprite的指导都将受到高度赞赏。

更新： 我已经阅读了“清单部分”中的文章，但是对我来说还不是很清楚。有人可以提供使用CSS
Sprite的示例吗？[答案中一个简短的，独立的示例对于SO而言，比仅仅链接至其他示例更好。–ed。]

Answer 1

您需要研究的示例如下：

#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}

Sprite.gif是一个大图像，它包含网格中的所有较小图像（不一定是）。然后，使用定位仅显示包含图像的精灵部分。

有一些在线工具可以给定一组图像返回一个大的精灵图像，并带有在哪里可以找到较小图像的坐标。