一、background-position可能的值
值 | 描述 |
top left top center top right center left center center center right bottom left bottom center bottom right | 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos |
第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
二、background-position赋值时的等价写法
1、top left, left top 等价于 0% 0%.
2、top, top center, center top 等价于 50% 0%.
3、right top, top right 等价于 100% 0%.
4、left, left center, center left 等价于 0% 50%.
5、center, center center 等价于 50% 50%.
6、right, right center, center right 等价于 100% 50%.
7、bottom left, left bottom 等价于 0% 100%.
8、bottom, bottom center, center bottom 等价于 50% 100%.
9、bottom right, right bottom 等价于 100% 100%.
三、背景图像定位中我们要明确的几点
1、两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。
如果只有一个值,那默认的就是x轴方向,
这时y轴方向就默认的是上下居中对齐,也就是center。
2、坐标轴的原点就是对应容器的左顶点。
3、这个坐标的y轴箭头朝下,也就是右下方(容器内部)x y的值才都为正。
4、x y值分别表示背景图片的左顶点相对于坐标原点(也就是容器的左顶点)的值。
5、x y的值可以用百分比或者px来表示。
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为负数时表示图片的左顶点在容器的左定点的上方。也就是向左和向上超出容器的范围。
文章转载自: background-position的使用 http://www.studyofnet.com/news/960.html