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或任何其他图像编辑软件.