background-position的理解

background-position: [left] [top] ;
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角，也就是说padding值不影响position的定位。
如果只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。内置的几个值分别对应：
top:0%;
left:0%;
right:100%;
bottom:100%;
center:50%;

1.对于使用数据值单位（如px等）
那么以 目标元素左上角为坐标原点，以image元素的左上角为参考点，距离目标元素的左边距和上边距长度。
2.对于使用百分比，
以 目标元素左上角为坐标原点，以image中的点X为参考点，距离目标元素的左边距和上边距长度。X满足：
X 是 DIV上，距离DIV元素左上角[left%,top%] 与 image上，距离image元素的左上角[left%,top%]的重叠点。

因此，我们也可以计算出image元素左上角距离div元素左上角的距离：
~left:（div_width - image_width）* left%;
~top:（div_height - image_height）* top%;
图示如下：



实例：
背景图片居中：background-position: 50% 50%;[or center center]
      左上角：background-position: left top ;[or 0% 0%]
      左下角：background-position: left bottom ;[or 0 100%]
      右下角：background-position: right bottom ;[or 100% 100%]
      右上角：background-position: right top ;[or 100% 0%]

注意：不能将数据值单位和百分比一起用.


整理自：《精通CSS高级WEB标准解决方案》