《
用CSS Sprites加快网页加载速度》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/03023441H013.htm
当使用CSS sprite的时候，只用background-position: bottom -300px或background-position: right -200px;无比容易。这刚开始的时候是可行的，但是问题是，当你在宽度上或高度上扩大相干sprite图片的时候，本来设置的位置可能是错的，由于那个图片已经不再Sprite图片的底部或右部了。使用确实的地位来防止这个问题。
就像你在本文顶部的实例图片看到的那样，那些小图片都被预留了足够的空间。为什么不把他们塞到一块来让sprite图片更小呢? 因为使用这些图片的元素通常都会有大量的内容而且可能会需要扩展的间距,用class实现IE8“添加网页快讯”功能，甚至于其它图片不会意外出现。
把图片放到它要显示的处所的绝对的地方
例子中的每个条目都有个带数字的图片作为背景图片。如果你细心看了上面的那张图片，你能够看到这三个数字图片是如何错开排列的，这样如果内容增多，其它图片就不会心外涌现。
这个小技能貌似比较难懂得。我直到创立一个比拟大的sprite的时候才理解到这一点。比方，假如咱们盼望一个图片呈现在一个元素的左侧：
Tag：加载速度 Sprites 加载速度 Sprites
不必担忧Sprite图片的像素大小
给每个图片足够的空间
下面是一张样图：
将那个图片放到sprite图片的右边(本文开始的那个sprite图片)。这样的话，当你通过CSS挪动背景图片的位置的时候，基础上不可能有其它的小图片意外的出当初它的邻近。使用Sprite的时候经常碰到的一个问题是图片会出现在它不该出现的位置。
不要等到你实现切片之后才开端sprite.
--> [
网站建设之]用CSS Sprites加快网页加载速度
家喻户晓,用br代替div清除浮动，减少网站加载时间的最有效的方法之一就是减少网站的HTTP恳求数。实现这一目的的一个有效的方式就是通过CSS Sprites&mdash,用a程序读取网站的alexa世界排名;—将多个图片整合到一个图片中，然后再用CSS来定位。
本文的目标并不是讲CSS Sprite如何让一个网站更快，而是说一些应用CSS Sprite的时候的一些最佳实际。
定位时避免使用bottom或right等
如果你边切图边写CSS，而后等你完成了全部网站之后再来拼接这些图片到一个Sprite中，你就不得不完整重写你的CSS，你也必需要破费良多的时光来用PS拼接大批的图片—&mdash,生命科学类网站发展模式;这是件令人倍感纠结的事件。然而如果边切图边整合，就会比较轻易些。
例子：
如果你的网站经由良好的设计，那么你将会有一大堆的图片来整合进到sprite里面，这样你就须要你个十分大的sprite来适当的放置这些图片。这是很不错的,理解CSS的查找匹配原理，让CSS更简洁高效。sprite里的空缺不会占用太多的文件大小。
(责任编辑：网站建设)
用CSS Sprites加快网页加载速度相关文章