背景定位(background-position)
background-position 属性用来控制背景图片在元素中的位置。技巧是,实际上指定的是图片左上角相对于元素左上角的位置。
下面的例子中,设置了一个背景图片并且用 background-position 属性来控制它的位置,同时也设置了
background-repeat 为 no-repeat。计量单位是像素。第一个数字表示 x 轴(水平)位置,第二个是 y 轴(垂直) 位置。
/* 例 1: 默认值 */
background-position: 0 0; /* 元素的左上角 */
/* 例 2: 把图片向右移动 */
background-position: 75px 0;
/* 例 3: 把图片向左移动 */
background-position: -75px 0;
/* 例 4: 把图片向下移动 */
background-position: 0 100px;
background-position 属性可以用其它数值,关键词和百分比来指定,这比较有用,尤其是在元素尺寸不是用像素设置时。
关键词是不用解释的。x 轴上:
- * left
- * center
- * right
y 轴上:
- * top
- * center
- * bottom
顺序方面和使用像素值时的顺序几乎一样,首先是 x 轴,其次是 y 轴,像这样:
background-position: top right;
使用百分数时也类似。需要主要的是,使用百分数时,浏览器是以元素的百分比数值来设置图片的位置的。看例子就好理解了。假设设定如下:
background-position: 100% 50%;
使用百分数定位时,其实是将背景图片的百分比指定的位置和元素的百分比位置对齐。也就是说,百分数定位是改变了背景图和元素的对齐基 点。不再像使用像素和关键词定位时,使用背景图和元素的左上角为对齐基点。例如上例的 background-position: 100% 50%; 就是将背景图片的 100%(right) 50%(center) 这个点,和元素的 100%(right) 50%(center) 这个点对齐。
2:
position的两个参数:水平方向的位置,垂直方向的位置----------该位置是指背景图片相对于前景对象的
1.background:url(../image/header.jpg) no-repeat left top; /*相当于0% 0%*/
表示背景图片在指定div的位置,从左上角开始
2.background:url(../image/header.jpg) no-repeat right bottom; /*相当于100% 100%*/
表示背景图片从指定div的右下角开始显示图片,并且背景图片右下角与div的右下角重合
3.background:url(../image/header.jpg) no-repeat 300px 200px;
即背景图片距div的左边界300px,距div的上边界200px。
4.background:url(../image/header.jpg) no-repeat 50% 50% ;
/* 相当于background:url(../image/header.jpg) no-repeat center ; */
背景图片在div中水平方向与竖直方向都居中显示.
但注意:百分比值同时应用于元素div及其背景图像。
例如:
(1)当在某一元素里居中背景图像时,图像中被描述为50% 50%的点将与元素中同样描述的点对齐。
(2)要使背景图像横跨元素的三分之一,纵跨三分之二,可以按如下声明:
background:url(beijing.gif) no-repeat 33% 66%;
这就使得图像上相对于左上角水平为三分一,垂直为三分之二的那个点与元素中的同样的点重合。
注意,百分比的水平值总是在前面。如果将上例中的这两个百分比值交换位置,那么背景图像将被放于水平三分之二,垂直三分之一处。同样,当只给出一个百分比值时,这个值为水平值,而另一个垂直百分比值被假定为50%。当只有一个值给出时,另一个被假定为center。