解决方法
就像你说的,其中一个主要优点是减少了对服务器的请求数量,从而缩短了响应时间(特别是如果你正在加载大量的小图像).但这不是人们使用精灵的唯一原因.
如果你不使用精灵用于“鼠标悬停”显示,用户将看到图像消失一秒……而且它看起来非常糟糕.这是因为如果您更改图像而不是仅仅移动精灵,则会加载新图像,并且最终用户可以看到加载时间.
.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或任何其他图像编辑软件.
