原理
CSS Sprites 其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的background-image，background-repeat，background-position 的组合进行背景定位，background-position 可以用数字精确的定位出背景图片的位置。
在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。利用 CSS Sprites 技术，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
所以，CSS Sprites 技术加速的关键，并不是降低质量，而是减少个数。当然随之而来的增加内存消耗，CSS Sprites 图片繁琐的合成等缺点在网站性能的提升面前，就不足为道了。所以大型网站都会运用到CSS Sprites这项技术。
举个栗子
比如说淘宝首页，一张图片就是一个http请求，如果一个网页上面有几百张图片，那么将会是几百个http请求。再加上同时有很多游客会访问淘宝，这会导致服务器反应速度下降，甚至崩溃。这个时候，CSS Sprites 就有很好的表现机会了，他能把不会经常变动的小图标集中到一张图片上，不但减少http请求，而且还降低了图片的大小，加快图片的加载速度。
伪代码演示
// html
<div class='css-spirit' id='item1'></div>
<div class='css-spirit' id='item2'></div>
<div class='css-spirit' id='item3'></div>
// css
.css-spirit {
background-image:url(/整图地址);
background-repeat:no-repeat;
}
#item1 {
width: 16px;
height:16px；
background-position:0 -234px;
}
#item2 {
width:容器宽度;
height:容器高度;
background-position:X坐标 Y坐标;
}
#item3 {
width:容器宽度;
height:容器高度;
background-position:X坐标 Y坐标;
}
最终结果就是：
整张图如下
item1 的显示效果为：
