background-position解析

参考文章为：http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html

background-position属性有三种方式能够设置：

一、百分比 x% y%

二、位置

水平：left|center|right;

left至关于x为0%   center 50%    right 100%

垂直：top|center|bottom;

top至关于y为0%   center 50%    bottom 100%

三、数字

10px 20px;   -30px -40px;

 

说明： 
设置或检索对象的背景图像位置。必须先指定 background-image 属性。
该属性定位不受对象的补丁属性( padding )设置影响。
默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。
若是只指定了一个值，该值将用于横坐标。纵坐标将默认为 50% 。若是指定了两个值，第二个值将用于纵坐标。
若是设置值为 right center ，由于 right 做为横坐标值将会覆盖 center 值，因此背景图片将被居右定位。
对应的脚本特性为 backgroundPosition。

 

当设置的值为数字的时候：

　　好比为20px 30px，那么就是背景图片从0,0点向右移动20px，而后再向下移动30px。

　　好比为-20px  -30px，那么就是背景图片从0,0,点向左移动20px，而后再向上移动30px。

 

若是设置的为百分比的时候：

　　等同于x：（容器(container)的宽度 - 背景图片的宽度）*x百分比，超出的部分隐藏
　　等同于y：（容器(container)的高度 - 背景图片的高度）*y百分比，超出的部分隐藏

　　（1）好比容器的宽度为1000px，高度为540px；背景图片的宽度为269px，高度为276px。background-position为20%  30%。

　　那么x为(1000-269)*20%=146px（小数部分是四舍五入）

　　y为(540-276)*30%=79px

　　最后就是背景图片从0,0点向右移动146px，而后再向下移动79px

　　（2）好比容器的宽度为1000px，高度为540px；背景图片的宽度为269px，高度为276px。background-position为-20%  -30%。

　　那么x为(1000-269)*(-20%)=-146px（小数部分是四舍五入）

　　y为(540-276)*(-30%)=-79px

　　最后就是背景图片从0,0点向左移动146px，而后再向上移动79px

 

若是设置的为位置（left top等）

　　先把位置转换成百分比，而后再按照百分比的方式计算