参考文章为：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等）
先把位置转换成百分比，然后再按照百分比的方式计算