利用CSS Sprites加快网页加载速度的技巧

文章摘要:基本上不可能有其它的小图片意外的出现在它的附近。 使用Sprite的时候常常遇到的一个问题是图片会出现在它不该出现的位置。 　定位时避免使用bottom或right等 当使用CSS sprite的时候， 为什么不把他们塞到一块来让sprite图片更小呢? 　　不用担心Sprite图片的像素大小 如果你� 免使用bottom或right等

当使用CSS sprite的时候，只用background-position: bottom -300px或background-position:

right -200px;非常容易。这刚开始的时候是可行的，可是问题是，当你在宽度上或高度上扩展相干sprite图片的时候，原先设置的位子可能是错的，因为那个图片已经不再Sprite图片的底部或右部了。使用准确的位置来避免这个问题。

电脑街 http://www.computerj.com您的好朋友。

给每个图片充分的空间

就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了充分的空间。为什么不把他们塞到一块来让sprite图片更小呢? 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距，以至于其它图片不会意外出现。例子：

例子中的每个条目都有个带数字的图片作为背景图片。如果你仔细看了上面的那张图片，你可以看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会心外出现。不用担忧Sprite图片的像素大小

要是你的网站经过良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就须要你个非常大的sprite来恰当的放置这些图片。这是非常不错的。sprite里的空白不会占用太多的文件大小。