在CSS中的定位肯定离不开position，顾名思义，背景图片中的background-position也是为了定位而出现的，它可以取百分数，像素以及关键词分别为top,right,left,bottom
- 明确背景图的覆盖区域
首先，得明确的是，背景图片覆盖的区域是content+padding+border，它是不包括外边距(margin)的，这一点可以通过设置取值进行实现的：
展现的效果是这样的
可以看到右边的分布图，清楚的显示padding,border,margin都是20px，按道理这个div的宽和高都应该是400px，但是真正的宽和高是380px，这是因为margin没有包括在内（很遗憾因为不好截图，没有给出具体的值，大家可以自己试一试就明白了）。
- 明确background-position定位的基准
还有一个难点就是background-position的定位问题，有一个公式可以进行套用：
图像相对于左边的距离为：（width-图片宽度）*百分比；
图像相对于上方的距离为：（height-图片高度）*百分比；
举个例子：
得到下面的效果
如果单从代码看，图像离边框的上方和左边的距离应该相等才对啊，div的宽高相等，设置的百分数也想等，但是为什么明显不同呢？
公式
这里就要用到上面的公式了，本例中div的宽高均为500px+20px（padding值），百分比均为30%，但是图像不是正方形的，图像是360*240的，代入公式可得：
离左边的距离：（520-360）*30%=48px;
离上方的距离：（520-240）*30%=84px;
看到这里应该就能明白，为什么图像离上方的距离会比离左边的距离要多，从而我们也可以得出一个结论：
背景图像的定位的宽度是基于（width-图像宽度）的，高度是基于（height-图像高度）的
如果我们将background-position的值设置为100%，则其效果和设置为right和bottom是一样的，
根据公式，
离左边的距离：（520-360）*100%=160px;
离上方的距离：（520-240）*100%=280px;
效果如下：
同理可知，如果设置background-position的值为50%，则效果和设置center是相同的。
还有一种比较特殊的情况，就是当div小于图像大小时，会产生负值，也就是有一部分图像不能显示出来，在大神张鑫旭的微博中看到了这样一个例子，也是比较不符合常规的
当设置div的大小小于图像大小，并且设置background-position的值为-50%时，会出现意想不到的效果，下面举个例子看一下：
效果如下：
如果按照我们通常的理解，将position的值设置为负值，图片会向左上方隐藏，但是在这里确是向右下方隐藏，这就是不同之处，但是如果在公式里套一下就会很容易理解，因为这是初中生都知道的知识，负负得正嘛。