Home  >  Article  >  Web Front-end  >  CSS中background-position的使用_html/css_WEB-ITnose

CSS中background-position的使用_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:37:031518browse

一、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


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn