background-position解析

标签：

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

background-position属性有三种方式可以设置：

1、百分比 x% y%

2、位置

水平：left|center|right;

left相当于x为0%   center 50%    right 100%

垂直：top|center|bottom;

top相当于y为0%   center 50%    bottom 100%

3、数字

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等）

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

background-position解析

标签：

原文地址：http://www.cnblogs.com/king-bj/p/5144390.html