在这个例子中去银行取钱就是浏览器准备HTTP报文，跑广州再回来就是一个HTTP请求-响应过程，荔枝自然就是response了，虽然HTTP请求-响应过程没有跑广州那么累，但因为HTTP协议是无连接的，一次请求结束后就断开，每次都这样也挺累的，就跑一次拿回一张大图来还是比较轻松的，当然你大图内不能就三四张小图。。。
还有一个好处，这样不但快了，还省流量了，因为HTTP请求-响应会在客户端和服务器端交互HTTP报文，所以下载一个图片所用流量不只是图片大小，每个HTTP报文会占用网络流量的。也许有同学会问，谁会在乎那点而流量，你别说还真有人在乎，如果你不是自己机房，而是把服务器放在别人机房就知道流量也是很贵的，如果你的网站每天被访问数十亿次，这点儿流量就会让你肉疼了，不知道大家看过Google首页Page Source没有，截取一部分，可以发现，人家连HTML的换行符、缩进、空格都给省了，你说图的是可读性吗
更别说对广大手机党来说，流量也是要看的，如果一个网站访问要花很多流量，我是不会用手机看来看去的
CSS小妖精实现方法
明白了为什么要这么做，我们就可以看看该怎么来做了，先有世界观再有方法论，首先了解一下CSS的background-position
background-position 设置或检索对象的背景图像位置。必须先指定 background-image 属性。
语法：
background-position : length || length
background-position : position || position
取值：
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位
position : top | center | bottom | left | center | right
这是jQuery UI上取下来的两张图片，分别是icon普通和hover是的样子，每个小图是16px * 16px，每张图片有15行16列，当然有的部分没有图片，下面的demo会有很多部分有空白。
复制代码
.icon
{
background-image:url( images/normal.png);
background-repeat:no-repeat;
height:16px;
width:16px;
float:left;
margin:4px;
background-color:#ccc;
}</p>
<p> .icon:hover
{
background-image:url( images/hover.png);
background-color:#f1f1f1;
}</p>
<p> #test
{
width:385px;
overflow:hidden;
margin:50px;
border:dashed 1px #ccc;
}
复制代码
<div id=”test”></div>
