css sprite的使用心得

提高网页显示速度最有效的一个方法是减少页面的HTTP请求次数，为了减少HTTP请求次数，最直接有效的方法是使用精灵图片（CSS sprites），精灵图片是把许多图片放到一张大图片里面，通过CSS来显示图片的一部分。

不要等你完成所有工作后再开始使用CSS精灵（我就是通过YSlow分析页面性能之后才想起来没用精灵。）

在网站全部完成后，你的CSS和图片也都已经创建好了，这时候你再使用CSS精灵，也就意味着你要返回重写CSS，并且还要把用到的一大堆图片再丢到Photoshop里拼合成一张图片，这是非常痛苦和乏味的。如果在刚开始构建页面时就着手使用CSS精灵，那么一切都会变得简单。

按图片显示相反的方向放置图片

这一条有点难以理解，假如一张图片应该出现在一个元素的左边，请将这张图片放在精灵的右边。用这种方式处理后，当你用CSS移动背景图片时，不可能会有别的图片会（错误的）显示处理。

避免在CSS使用bottom或right定位

当定位CSS精灵中靠后的图片时，使用类似background-position: bottom -300px; 或者 background-position: right -200px;的方式定位非常容易。最初，这一切都能正常工作，但是，一旦你的CSS精灵宽度或高度增加时，你刚才使用的定位方式就发现了错误，因为图片相对右边或者底边的距离已经发生了变化。所以，请使用left和top来定位。

为每张图片留出足够空隙

正如你所看到文章中提供的例子精灵图片一样，许多小图片间都预留了很多空白。为什么不把图片挤得紧凑点让精灵图片尺寸更小点呢？因为使用元素的地方可能包含各种不同的内容，这些内容会导致容器变宽变高，预留了足够的空白的话，在容器大小发生变化时，可以避免其他的图片显示出来。

无需担心CSS精灵的尺寸大小

如果你有机会以标准的web设计来设计你的网站，那么你必定要将把很多图片放到精灵图片上，并且为这些图片预览出合适的空隙，这很好。精灵图片中的空白空隙不会增加太多文件的体积，在addons.mozilla.org网站上使用的精灵图片尺寸是1,000×2,000，但它仅16.7kb！

例

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

　　引用该类，然后在元素中逐一定义背景坐标，以下为关键属性：

　　#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

　　#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

　　#ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

　　.nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

　　必须要限定容器大小符合背景图元素位置，另外，XY轴是相对于整张图片的左上角来算的，所以取值一定要算清楚。