CSS sprites如何工作？

Question

我有3个不同的图像，想要使用CSS创建一个精灵。据我所知，这将减少HTTP请求。但是，我对这个概念完全不了解，也不知道如何处理这个问题。

对我来说最好的选择是什么？此外，我已经看到有一些CSS精灵生成器，您提交.zip图像，并将它们组合在一起。

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

更新：我已阅读了A List Part文章，但对我来说并不是很清楚。有人可以提供使用CSS精灵的例子吗？ [答案中的一个简短，自成一体的例子对于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是一个包含网格中所有较小图像的大图像（不一定是）。然后使用定位来显示包含图像的精灵部分。

有一些在线工具可以给出一组图像，返回一个大的精灵图像，其坐标位置可以找到较小的图像。

Answer 2

<强> CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Answer 3

List Apart有一篇很好的文章：CSS Sprites: Image Slicing’s Kiss of Death

Answer 4

这一切都意味着当你做精灵时，你的小图像是在一个图像文件上平铺的。如果您有一个不错的图像编辑程序，您可以自己创建这个单个图像文件。然后，您可以使用css background-position属性指定要用于该精灵的图像片段。

Answer 5

在Google's sprite处查看他们用于iGoogle的内容。您只是将图像组合成一个大图像。这样你就可以提出一个请求。然后使用背景定位和高度和宽度选择所需图像的哪个部分。

这对于悬停时更改的图像也非常有效，因为悬停状态已经下载并且没有任何延迟。

Answer 6

假设你有一个按钮，当它被模仿时会改变它的背景图像。鼠标悬停需要立即发生以向用户提供良好的反馈。如果您只是简单地切换按钮上的图像，浏览器可能必须转到服务器来获取图像，这会破坏效果。通过使用CSS精灵，您可以加载每个图像并准备好立即按下按钮。

此外，当您切换图像时，某些浏览器会“闪烁”。 CSS sprites避免了有时会发生的闪烁问题。