CSS backgroundpostion定位是个细活，要像做精密仪器一样小心翼翼

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;

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">&nbsp;</span></li>   <li><span class="b2">&nbsp;</span></li>   <li><span class="b3">&nbsp;</span></li>
      <li><span class="b4">&nbsp;</span></li>   <li><span class="b5">&nbsp;</span></li>   <li><span class="b6">&nbsp;</span></li>
      <li><span class="b7">&nbsp;</span></li>   <li><span class="b8">&nbsp;</span></li>   <li><span class="b9">&nbsp;</span></li>
      <li><span class="b10">&nbsp;</span></li>  <li><span class="b11">&nbsp;</span></li> <li><span class="b12">&nbsp;</span></li>
      <li><span class="b13">&nbsp;</span></li>  <li><span class="b14">&nbsp;</span></li> <li><span class="b15">&nbsp;</span></li>
      <li><span class="b16">&nbsp;</span></li>  <li><span class="b17">&nbsp;</span></li> <li><span class="b18">&nbsp;</span></li>
      <li><span class="b19">&nbsp;</span></li>  <li><span class="b20">&nbsp;</span></li> <li><span class="b21">&nbsp;</span></li>
      <li><span class="b22">&nbsp;</span></li>  <li><span class="b23">&nbsp;</span></li> <li><span class="b24">&nbsp;</span></li> 
      <li><span class="b25">&nbsp;</span></li>  <li><span class="b26">&nbsp;</span></li> 
    </ul>
</body>
</html>

定位后的效果如下

background-position取负值，就是设定偏移量，分别对应X轴，Y轴