css - CSS 图像精灵

Question

使用 css 图像精灵的唯一好处是 http 请求更少吗？

或者还有其他好处吗？

还有一种简单的方法可以确定要显示的精灵的哪个区域？

Answer 1

就像您说的那样，主要优势之一是减少对服务器的请求数量，提高响应时间（尤其是在您加载大量小图像时）。但这并不是人们使用精灵的唯一原因。

如果您不使用精灵进行“鼠标悬停”显示，用户将看到图像消失一秒钟......而且看起来非常糟糕。这是因为如果您更改图像而不是仅仅移动精灵，它将加载新图像，并且最终用户可以看到加载时间。

.bad{
  background:url(abc.jpg);
}
.bad:hover{
  background:url(abcHover.jpg);
}

.good{
  background:url(abc.jpg) 0px 0px;
}
.good:hover{
  background-position:15px 0px;
}

sprites 的另一个优点是您可以将所有图像保存在一个位置，并且在某些情况下它更有意义（对于菜单等）。

要确定要显示精灵的哪个区域，只需使用 Photoshop 或任何其他图像编辑软件。

Answer 2

主要好处是您的页面加载速度更快，主要是因为减少了 HTTP 请求。

您可以使用工具生成您的精灵。

免责声明 - 我写了这个工具。

Answer 3

是的，还有另一个好处。每个图像文件都有自己的标题，描述图像类型、颜色等。因此，当您将图像组合成单个精灵时，您会赢得一些 kb。

但正如您之前所说，大多数情况下您都是通过减少 HTTP 请求数来取胜的。

Answer 4

在相同的跨浏览器中放置图像（尤其是文本旁边）要容易得多。您可以在不使用垂直对齐和填充的情况下向上/向下/向左/向右调整图像。

如果它们在一个文件中，我发现跟踪所有图像更容易。特别是因为我通常有一个透明的 png 图像，然后使用 ie6 的 gif 图像。我将我的 png sprite map 保存为 gif，并在我的 ie6 css 中添加一行带有背景图像的行，然后我的图像被切换。

我使用 Photoshop 或 gimp 获取精灵图中的大致位置，然后使用 Firefox 微调位置。

Answer 5

在确定要显示的区域方面，我通常会将我的元素放置在 100 倍数的像素上。因此，如果有一个带有一堆 64x64 像素图标的精灵，我通常会将它们放在 (0, 100), ( 0, 200), (0, 300) 等

这样，在设置我的所有背景位置属性时，我不必输入精确的测量值（或任何其他开发人员）并保存击键。