CSS中background-position的使用

1、background-position赋值时的等价写法

一、top left, left top 等价于 0% 0%.

二、top, top center, center top 等价于 50% 0%.

三、right top, top right 等价于 100% 0%.

四、left, left center, center left 等价于 0% 50%.

五、center, center center 等价于 50% 50%.

六、right, right center, center right 等价于 100% 50%.

七、bottom left, left bottom 等价于 0% 100%.

八、bottom, bottom center, center bottom 等价于 50% 100%.

九、bottom right, right bottom 等价于 100% 100%.

 

2、背景图像定位中咱们要明确的几点

 

一、两个值前面一个是横向的定位，咱们称为x轴方向定位。后面一个值是纵向的定位，咱们称为y轴方向定位。

    若是只有一个值，那默认的就是x轴方向，

    这时y轴方向就默认的是上下居中对齐，也就是center。

 

二、坐标轴的原点就是对应容器的左顶点。

三、这个坐标的y轴箭头朝下，也就是右下方（容器内部）x y的值才都为正。

四、x y值分别表示背景图片的左顶点相对于坐标原点（也就是容器的左顶点）的值。

五、x y的值能够用百分比或者px来表示。

 

六、x y也能够用“left、right、top、bottom、center”这五个对齐方式来表示，

    但注意：用“left、right、top、bottom、center”来表示的时候，应用的是对齐规则，而不是坐标规则。

    x为left是表示图片的左边和容器的左边对齐，为right的时候表示图片的右边和容器的右边对其，

    y为top的时候表示图片的顶部和容器的顶部对齐，

    为bottom时表示图片的底部和容器的底部对齐，x y等于center的时候表示居中对齐。

 

七、x y用百分比或者px表示的时候，其值能够为负数。咱们应用坐标规则就很容易理解负数表示的意义，

    x为负数时候表示图片左顶点在容器左顶点的左侧，

    y为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。

 

参考资料： background-position的使用  http://www.studyofnet.com/news/960.html