background-position的使用方法

这是在学习了阮一峰先生的博客后写的一篇解释笔记，附上原链接《CSS中背景图片的定位方法》

CSS中的背景图片定位方法有三种：

1. 关键字定位：background-position：top left；

2. 像素定位：background-position：x px  y px；

3. 百分比定位：background-position：x% y%；

其中，1、2都是将背景图左上角的原点放置在规定的位置，x，y轴相当于坐标的两个值。百分比定位的放置规则是：图片本身（x% y%）的那个点与背景区域的（x%  y%）的那个点重合。

                                  

一个例子（最后会附上我的解法）：

背景图片是如图左的四个边长为100px的方块，想要将其横过来：

                                                  

代码如下：

.div1, .div2, .div3, .div4{
    float: left;
    width: 100px;
    height: 100px;
    position: relative;
    background: url(xxxx.png) no-repeat;
}

.div1{background-position: 0% 0%;}
.div2{background-position: 0% 33.33%;}
.div3{background-position: 0% 66.67%;}
.div4{background-position: 0% 100%;}

background-position的值 可以用方程来解释：
                                             

每个div的背景图相对于背景区域的位置就如图所示。对于div1，背景图片的左上角和区域左上角重合，故x，y值均为0；

对于div2：背景图片的纵向比区域纵向高100px，即 400*y - 100*y = 100px   => y = 1/3 = 33.33%

对于div3：背景图片的纵向比区域纵向高200px，即 400*y - 100*y = 200px   => y = 2/3 = 66.67%

对于div4：背景图片的纵向比区域纵向高300px，即 400*y - 100*y = 300px   => y = 1 = 100%