·将众多图标做到一个文件中能减少客户端对服务器端的请求次数；
·一次性将图片下载到本地，页面显示许多图标或是做些图片翻转效果时能马上显示图片，减少等待时间；
上边这张图来源于淘宝网，下边我们看下如何通过CSS控制在不同位置显示出不同的图案：
<div style="width:13px;height:13px;background:url(/pic/200904/042.png) no-repeat -176px -155px;"></div>
<div style="width:11px;height:11px;background:url(/pic/200904/042.png) no-repeat -150px -200px;"></div>
<div style="width:16px;height:16px;background:url(/pic/200904/042.png) no-repeat -386px -194px;"></div>下边我们着重说下background-position这个属性，它用于设置或检索对象的背景图像位置，其值通常有三种形式：
background-position:top left;
background-position:0px 0px;
background-position:20% 10%;前面两种都是精确指定了背景图左上角相对于其容器的坐标(容器左上角坐标(0,0))，但第三种方式就不是这么理解了，它是指背景图片的(20%,10%)坐标将和容器的(20%,10%)坐标重叠(如下图示)：
使用百分数定位时，其实是将背景图片的百分比指定的位置和容器的百分比位置对齐。也就是说，百分数定位是改变了背景图和容器的对齐基点。不再像使用像素和关键词定位时，使用背景图和容器的左上角为对齐基点。例如 background-position: 20% 10%; 就是将背景图片的 20% 10% 这个点，和容器的 20% 10% 这个点对齐。
评论（2）
搜“CSS控制图片位置”，找到兄弟这儿来。
试着登陆一下，居然还能进。