CSS background-postion定位是个细活，要像做精密仪器一样小心翼翼
1. css背景属性background-postion，可以取值：left | center | right | top | bottom
例如：
background-postion：left;
background-postion：center ;
background-postion：right ;
background-postion：bottom ;
background-postion：top;
2.或则是他们的几种组合，
例如 ：
左上对齐：background-postion：left top;
左下对齐：background-postion：left bottom;
居中对齐：background-postion：center ;
右上对齐：background-postion：right top;
右下对齐：background-postion：right bottom;
3.还有一种组合是混合模式
例如：
右对齐，Y轴偏移47像素：background-position: right -47px;
左对齐，X轴偏移47像素：background-position: left -47px;这种写法 等同于background-position: 0 -47px;
这种写法可以减少定位运算，直接左右对齐平移，省事。 缺点就是 图片都要靠两边边排列，中间空出来，增大了图片大小，影响网速。
4.用得最频繁的是背景偏移百分比和像素偏移量。 语法是：background-position:x% y%|x px y px;
我们在网站开发的时候，为了加快浏览器处理速度，减轻Http请求次数， 一般把网站的背景图片，ps到一张底图，
然后通过background-position 来定位背景。
下面是一张典型的网站元素背景图。
下面的代码，就是定位图片的位置代码。一共有26张底图，通过设定 26个span来定位底图
特别注意，span的width和height设置要和 你要定位的底图大小一致，不然效果就不明显。
比如你一个button背景的小是20x20大小，你把span当button用，把span设置成了100X100大小，
代码是：span.bt{background:url(/images/global.png) no-repeat scroll 0 0 transparent; display:block;
width:100px;height:100px }
即使定位对了，还是把其他不相关的背景图也显示了。
定位是个细活，要像做精密仪器那样小心翼翼。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> body,div{ margin:0;padding:0;} ul{width:600px;height:300px; background-color:#fcfaf7} ul li{float:left; list-style:none;width:87px;height:34px; padding-bottom:15px;} ul li span{ background:url(/images/global.png) no-repeat scroll transparent; display:block} span.b1{width:6px;height:33px; background-position:0px 0px} span.b2{width:53px;height:28px; background-position:-15px 0px} span.b3{width:82px;height:28px; background-position:-78px 0px} span.b4{width:6px;height:27px; background-position:-179px 0px} span.b5{width:35px;height:24px; background-position:-203px 0px} span.b6{width:6px;height:33px; background-position:-245px 0px} span.b7{width:6px;height:33px; background-position:0px -47px} span.b8{width:20px;height:20px; background-position:-15px -41px} span.b9{width:33px;height:27px; background-position:-46px -41px} span.b10{width:16px;height:13px; background-position:-91px -41px} span.b11{width:16px;height:11px; background-position:-91px -66px} span.b12{width:20px;height:13px; background-position:-120px -41px} span.b13{width:12px;height:13px; background-position:-153px -41px} span.b14{width:10px;height:13px; background-position:-181px -41px} span.b15{width:23px;height:18px; background-position:-207px -41px} span.b16{width:6px;height:34px; background-position:-244px -47px} span.b17{width:6px;height:22px; background-position:0px -93px} span.b18{width:23px;height:29px; background-position:-16px -86px} span.b19{width:26px;height:32px; background-position:-51px -82px} span.b20{width:22px;height:20px; background-position:-227px -94px} span.b21{width:80px;height:27px; background-position:0px -125px} span.b22{width:10px;height:34px; background-position:-243px -125px} span.b23{width:5px;height:18px; background-position:-246px -173px} span.b24{width:6px;height:33px; background-position:-243px -196px} span.b25{width:6px;height:33px; background-position:-243px -239px} span.b26{width:7px;height:28px; background-position:-245px -286px} </style> </head> <body> <ul> <li><span class="b1"> </span></li> <li><span class="b2"> </span></li> <li><span class="b3"> </span></li> <li><span class="b4"> </span></li> <li><span class="b5"> </span></li> <li><span class="b6"> </span></li> <li><span class="b7"> </span></li> <li><span class="b8"> </span></li> <li><span class="b9"> </span></li> <li><span class="b10"> </span></li> <li><span class="b11"> </span></li> <li><span class="b12"> </span></li> <li><span class="b13"> </span></li> <li><span class="b14"> </span></li> <li><span class="b15"> </span></li> <li><span class="b16"> </span></li> <li><span class="b17"> </span></li> <li><span class="b18"> </span></li> <li><span class="b19"> </span></li> <li><span class="b20"> </span></li> <li><span class="b21"> </span></li> <li><span class="b22"> </span></li> <li><span class="b23"> </span></li> <li><span class="b24"> </span></li> <li><span class="b25"> </span></li> <li><span class="b26"> </span></li> </ul> </body> </html>
定位后的效果如下
background-position取负值，就是设定偏移量，分别对应X轴，Y轴
