CSS图像精灵

Question

时使用CSS图像精灵有较少的http请求的唯一的好处？

或者是有其他的好处？

也就是有detiming的一个简单的方法Sprite的面积要显示哪些？

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请求。

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

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

。

Answer 3

这是很容易获得的图像位置（到文本尤其下）相同的跨浏览器。可以调整影像上/下/左/右与出使用垂直对准并填充。

我觉得它更容易保持所有的图像跟踪，如果他们是在一个单一的文件。特别是因为我通常有一个透明的PNG图像和然后用GIF图像的IE6。保存我PNG子画面的地图为GIF和在我IE6的CSS添加与背景图像的一行和我的图像切换。

我用photoshop或辫形以获得在子画面地图近似位置，然后使用Firefox微调的位置。

Answer 4

是的，有另一个好处。每个图像文件都有自己的标题，描述图像类型，颜色等，所以当你把图像到一个精灵，你赢了一些KB。

但正如你之前说的，主要是你通过减少HTTP请求数胜出。

Answer 5

在确定面积方面表现出，我通常将我的元素上是100的倍数所以像素，如果有一束的64×64像素图标的精灵，我通常让他们在（0，100 ），（0，200），（0，300），等等。

此方式，我没有设置所有我的背景位置属性时键入以精确测量（或任何其它显影剂也如此），并保存击键。