一般说来客户端对服务器端进行一次请求就要消耗0.2s左右。如果一个网站的图片，特别是网页素材较多的情况下， 于服务器之间的延迟就很大。利用CSS 图片拼合 (CSS sprites) 可有效降低图片文件的 HTTP 连接请求数。 多个图片将以一定间距合并为一个大图片文件。页面中使用这些图片的元素将利用 background-position 这一 CSS 属性来显示拼合图片中的指定位置。
例子：
<div class=”max”>最大化</div>
<div class=”min”>最小化</div>
这两个class都使用同一个图片：
.min, max {
width:16px;
height:16px;
background-image:url(http://developer.yahoo.com/yui/build/assets/skins/sam/sprite.png);
background-repeat: no-repeat; //我们并不想让它平铺
text-indent:-999em; //隐藏文本的一种方法
}
效果如下：
最大化最小化
最大化最小化
我们看到一团灰，没错，因为我们还没有指定background-position，默认为 0 0，可以看下 sprite.png , 处于这个位置正是灰块。好了，我们要找到代表最大化的加号和代表最小化的减号的位置找出来。经过测量，最大化按钮位于Y轴的350px处，最小化按钮位于 Y轴400px处。想一想我们如何才能让它们能够显示出来呢，明显，要向上提升sprite.png，得到代码如下：
.max {
background-position: 0 -350px;
}
.min {
background-position: 0 -400px;
}
就是这么简单，不过相信最麻烦的就是定位像素的问题，没事推荐个网站Web performance.这个能很轻松的帮你合成一张图片并帮你定位background-position的值。
