电脑使用过程中肯定遇到过同样的情况，同样体积的文件夹，如果两个文件夹中文件的数量并不相同，举个极端的例子，前者内部仅一个安装包文件，后者内部含有1000个小文件。如果要分别复制这两个文件夹，后者所需要的时间是远远高于前者的。
什么是雪碧图？
在网页设计中往往会利用很多小型的图标来作为修饰，比如用一个购物车的图标代替文字说明，比如用一个音符图标去修饰多媒体菜单。视网页的复杂程度，同一页面可能会同时出现几十乃至上百个图标，如果挨个去请求服务器传输文件的话，会耗费很多客户端请求和服务器响应的时间，于是雪碧图就应运而生了。雪碧图是根据“css sprite”音译过来的，就是将很多很多的小图标放在同一张图片上，客户端只请求一次图片，然后由浏览器根据实际需要，在不同的场景显示这张图片的不同部分。
雪碧图的设计与使用
把需要使用的小图标放在一张图片上，按照一定的距离间隔开，雪碧图虽然支持多种图片格式，但考虑到网页展示的时候不同区域可能存在不同的背景，透明背景的png格式显然更具适应性。
应用雪碧图的方式非常简单：
- 首先设置一个具备高度与宽度的容器；
- 将容器背景图片设置为指定的雪碧图；
- 然后为容器设置一个background-position的值——默认为（0、0），也就是图片的左上角。
雪碧图的实例
这里利用一个竖排的无序列表来显示图片，li元素设置了两个类，icon类用来控制相同的属性，比如宽度、高度、边距，“icon-x”则只用于定位元素；
<body>
<ul class="container">
<li class="icon icon-1"></li>
<li class="icon icon-2"></li>
<li class="icon icon-3"></li>
<li class="icon icon-4"></li>
</ul>
</body>添加一些css样式，需要注意的是裁剪图片事实上是由li元素的宽高与定位配合完成的，ul元素里的overflow只是为了让li元素的margin生效，也可以不使用，为ul设置一个顶部的边框border-top也可以实现同样的效果；
<style>
.container {
width: 70px;
height: 265px;
background-color: #faa755;
padding: 0;
overflow: hidden;
}
.icon {
margin: 5px 0 0 5px;
width: 60px;
height: 60px;
background-image: url(css_sprite_pic_p1.jpg);
list-style-type: none;
}
.icon-1 {background-position: 0 0;}
.icon-2 {background-position: 60px 0;}
.icon-3 {background-position: 120px 0;}
.icon-4 {background-position: 180px 0;}
</style>
文章中的雪碧图实例文件 提取码: 5fnh
