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;
}

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

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

Answer 2

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

您可以使用工具generate your sprite。

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

Answer 3

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

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

我使用photoshop或gimp来获取精灵地图中的大致位置，然后使用firefox来微调位置。

Answer 4

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

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

Answer 5

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

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