CSS背景定位属性——background-position

很多小伙伴看到这个标题估计看都不想看，background-position这属性有啥可讲的嘛，都用过无数遍了，只不过我们大多数情况下都是用的简写方式background，比如这样：

.box{
    background: url('../images/bg.jpg') no-repeat center;
}

最后的那个center其实就是background-position值，就是告诉浏览器我这个背景图片要定位在元素box的中间位置。

看起来确实很简单，没什么可讲的，但是你真的对它所有用法都了如指掌吗？

一、关键字（top、bottom、left、right、center）

1. 两个值

background-position可以取两个值，一个为横轴方向，一个为纵轴方向。

比如你想要把背景图定位在右下角，只需这样写：

background-position: right bottom;

So easy! 当然你也阔以把顺序反过来，丝毫没影响！

background-position: bottom right;

但是需要注意的是，仅仅在两个值都为关键字时才无关其顺序，因为根据关键字浏览器就能自动识别它是横轴方向还是纵轴方向。

要是你像下面这么写，那就挂了……

background-position: bottom 0;

2. 单个值

background-position取单个值时，另一个值默认设为center。例如：

background-position: top;

相当于：

background-position: top center;
/* 或者 */
background-position: center top;

3. 偏移值

上面这些貌似挺好用，但是却还不够灵活，包括下面即将讲到的长度值和百分值也同样不够灵活（都是相对左侧或顶部定位），如果我想要距离右侧和底部定位且还需有一定距离该怎么办呢？

其实也很简单，在关键字后再加个具体距离值即可，这个值可以是下面要讲到的长度值或百分数值，例如：

background-position: bottom 10px right 10%;
/*背景图底部距离盒子底部10px，参考点距离盒子右侧10%，参考点下面会讲到*/
background-position: bottom 10px right;
/*偏移值也可以省略，省略其实就相当于0px*/

需要注意的是关键字center无法设置偏移值，例如下面的写法是错误的。

background-position: center 10% top;  /*错误写法*/

二、长度值

这个好理解，就是那些数字后面带单位的具体值，比如：10px、1em等等。

1. 两个值

此时取值就不像关键字用法这么灵活了，它必须严格按照第一个值为距左边的长度值，第二个值为距顶边的长度值，顺序不能颠倒，因为你又没标明方向，我（浏览器）怎么知道？

例如，你想要让背景图定位在距左边10px、距顶边20px的位置，就可以这么写：

background-position: 10px 20px;

2. 单个值

这个其实跟上面讲关键字时的单个取值基本是一样的，都是将第二个值默认设置为center，唯一区别就是这个center只能放在这个长度值后面，也就是在纵轴方向居中。例如：

background-position: 10px;

相当于：

background-position: 10px center;
/* 横轴方向距离元素左侧10px，纵轴方向居中 */

三、百分数值

这个跟上面的长度值用法很像，只不过百分数值是个相对于盒子宽高的百分数，还有就是不仅只是在相对于盒子上有个百分比，在背景图本身也有个百分比。

举个简单例子：

background-position: 10% 50%;

这个是什么意思呢？背景图左侧距离盒子左侧的距离是盒子宽度的10%？背景图顶部距离盒子顶部距离是盒子高度的50%？

错！都错了！！！

如果是长度值的话，那么背景图是拿其左上角来相对盒子的左上角进行定位，但百分数值不是，它是拿其自身的(10%,50%)这个位置的点来相对盒子的左上角进行定位，上面这个例子的效果其实和下面这个效果是一样的。

background-position: 10% center;

如果还不好理解，再看下面这个示意图你就明白了。

background-position: 10% 50%

这是一个100px*100px的盒子，里面有张50px*50px的背景图，这个背景图就设置background-position: 10% 50%这个样式。然后你会发现，背景图左侧距盒子左侧距离为5px，而不是100*10%=10px，因为此时的定位参考系并不是图片的左侧。同样的，纵轴方向是垂直居中的，也不是100*50%=50px。此时的定位参考点是图片中(5px,25px)的这个点，而不是图片的左上角，这个点的位置是根据图片的宽高来计算的。

50 * 10% = 5px;
50 * 50% = 25px;

四、混合用法

以上三种背景定位属性值可以混合使用，例如：

background-position: 10px center;
background-position: 10px 10%;
background-position: right 10px bottom;
background-position: right 10% bottom 10px;

重点总结

① background-position可以设置关键字，包括top、bottom、left、right、center，还可以在关键字后设置相应的偏移量（center除外） ② background-position可以设置长度值和百分数值，长度值的定位参考点是在图片左上角，而百分数值不是