前端配合设计师之background-position定位图片
我们经常遇到UI设计师把同一类部件的小图片都放在一张图片里的情况，小图片就是整图分割后的各个部分，把各个部分放在一张图片上，而不是是分别存储成单独的图片，其目的就是要减少http请求次数，节省时间和带宽。对于我们前端来说，就是要把对应的小图片应用到适当的位置，这里就需要background-position属性。
这里需要搞清楚关于定位的一些东西：
1.两个值前面一个是横向的定位，我们称为x轴方向定位。后面一个值是纵向的定位，我们称为y轴方向定位。如果只有一个值，那默认的就是x轴方向，这时y轴方向就默认的是上下居中对齐，也就是center。
2.背景图片定位的坐标原点就是对应容器元素的“左上角”，即元素padding的外边缘。（这个值可以通过background-origin进行定义）
3.x y值分别表示背景图片的左上角顶点相对于坐标原点（也就是容器的左顶点）的值。
4.x y的值可以用px或百分比来表示。
5.当x y用百分比单位时，其表现与CSS中其他的百分比单位表现都不一样。
比如一个图片：1
img { position: absolute; left: 100%; }
一定是在容器外部，但像background-position:100% 100%就是定位在容器内的右下角。
那background-position百分比表示的背景图片的左上角顶点对应的容器坐标位置该如何计算呢？
具体公式为：
positionX = (容器的宽度-图片的宽度) * percentX;
positionY = (容器的高度-图片的高度) * percentY;
然后这样算出来的positionX和positionY就是相对于上面第三条结论的x和y，这就不难懂为什么background-position:100% 100%就是定位在容器内的右下角了吧。
6、x y也可以用“left、right、top、bottom、center”这五个关键字来表示，但注意：用“left、right、top、bottom、center”来表示的时候，“应用的是对齐规则，而不是坐标规则”。x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对齐，y为top的时候表示图片的顶部和容器的顶部对齐，为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。
7、x y用百分比或者px表示的时候，其值可以为负数。我们应用坐标规则就很容易理解负数表示的意义，x为负数时候表示图片左顶点在容器左顶点的左侧，y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。
但是这里要注意，有的情况下用百分比的负数时并不会像你想的那样向左和向上超出容器的范围，因为第5条中介绍的百分比定位规则，就算你
1 | background-position: -50% -50%; |
图片会像background-position: 40px 10px;一样定位在容器内部，此时就可能是你图片的长度大于容器的长度导致的，因为此时：
positionX = (容器的宽度-图片的宽度) * -50% 的结果是个正值
positionY = (容器的高度-图片的高度) * -50% 的结果也是个正值
所以就不难理解为什么会出现像background-position: 40px 10px;这样的效果了。
详细请参考：background百分比定位