CSS3雪碧图（sprite）应用实例

雪碧图的定义： 把网页中一些背景图片整合到一张图片中，再利用background-image 和 background-position 精确定位出背景图片所在的位置。

使用雪碧图的规则： 静态图片，不随用户信息的变化而变化；小图片，图片容量比较小，大图不建议拼成雪碧图；加载量比较大的图片。一般情况下，雪碧图需要保存为PNG-24的文件格式。

雪碧图的优点： 减少加载网页图片时对服务器的请求次数；提高页面的加载速度。

雪碧图的缺点： 内存使用；拼图维护比较麻烦；使CSS的编写变得困难。

雪碧图的应用示例
雪碧图样例

以几个图标为例
html代码：

<li class="cat1"><i></i><h3>服饰内衣</h3></li><li class="cat2"><i></i><h3>鞋包配饰</h3></li><li class="cat3"><i></i><h3>运动户外</h3></li><li class="cat4"><i></i><h3>珠宝手表</h3></li>

icon图标的大小为宽40px;高24像素，所以css样式：

i{    width: 30px;    height: 24px;    float: left;    background: url(images/sprite.png);    margin: 5px 10px 0 0 ;}.cat1 i{    background-position: 0 0;}.cat2 i{    background-position: 0 -24px;}.cat3 i{    background-position: 0 -48px;}.cat4 i{    background-position: 0 -72px;}

效果如图所示：