background-position(大图抠小图)

background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。

css背景图片定位（background-position,css sprit,背景定位,background-imag）

1. background-position: top right;  

1. background-position: 0px 0px;  

1. background-position: 0% 0%;  

前两种定位，都是将背景图片左上角的原点，放置在规定的位置。请看下面这张图，规定的位置是“20px 10px”和"60px 50px"，都是图片的原点在那个位置上，图中用X表示。

x y 背景图像的定位：（注意，只有在no-repeat下定位才有意义。这个就是今天要讲的重点） 

1、两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。 

2、坐标轴的原点就是对应容器的左顶点。 

3、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。 

4、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。 

5、x y的值可以用百分比或者px来表示。 

6、x y也可以用“left、right、top、bottom、center”这五个对齐方式来表示，但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐

scroll是默认值，0 0指的是背景图片的定位，这里的0 0相当于标签元素的左顶点(坐标轴原点)与背景图片的左顶点重合！

container{
width:300px;
height:150px;
background:transparent url(bg.jpg) no-repeat scroll 0 0;
border:5px solid green;
}

辅助 参考资料：http://blog.csdn.net/jeamking/article/details/5617088

总之一句话，在文档流中，元素的最终边界是由margin决定的，margin为负的时候就相当于元素的边界向里收，文档流认的只是这个边界，不会管你实际的尺寸是多少。

绝对定位的元素定义的top、right、bottom、left等值是元素自身的边界到最近的已定位的祖先元素的距离，这个元素自身的边界指的就是margin定义的边界，所以，如果margin为正的时候，那它的边界是向外扩的，如果margin为负的时候，则它的边界是向里收的。利用这点，就有了经典的利用绝对定位来居中的方法：参考：http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html

http://www.cnblogs.com/iyangyuan/archive/2013/06/01/3111704.html