在CSS中，背景图片的定位方位有3种：

（1）关键字：background-position: top right;
（2）像素：background-position: 0px 0px;
（3）百分比：background-position: 0% 0%;

前两种定位，都是将背景图片左上角的原点，放置在规定的位置。第一种就不介绍了。
 

第二种：像素定位，css中经常用

假如要取图中5号红色方块，边长位100px，图片为test.png那么代码如下：

设置div区域：

<div class="test">
</div>

css编写：

.test {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(test.png) no-repeat;
background-position: -200px -200px;
}

这样就可以取到5那个方块了

第三种：它的放置规则是，图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。比如，如果放置位置是“20% 10%”，这个点是在图片本身的“20% 10%”的位置上。适合页面缩放的网页中

事例：

背景图片是四个边长为100px的方块叠在一起
加载到网页后，变成下图样子


在网页中先设置四个div区域：

<div class="box1">
</div>
<div class="box2"">
</div>
<div class="box3">
</div>
<div class="box4">
</div>

css编写：
像素方法：

.box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(1234.png) no-repeat;
}

.box1 {
background-position:0 0;
}

.box2 {
background-position:0 -100px;
}

.box3 {
background-position:0 -200px;
}

.box4 {
background-position:0 -300px;
}

百分比方法：

.box1, .box2, .box3, .box4 {
float:left;
width:100px;
height:100px;
position:relative;
background: #F3F2E2 url(1234.png) no-repeat;
}

.box1 {
background-position:0% 0%;
}

.box2 {
background-position:0% 33.33333%;
}

.box3 {
background-position:0% 66.66666%;
}

.box4 {
background-position:0% 100%;
}