1. 程式人生 > >css背景圖片位置:background的position(轉)

css背景圖片位置:background的position(轉)

osi ack post 前景 相對 right 並且 back top

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中水平方向與豎直方向都居中顯示

5.background:url(../image/header.jpg) no-repeat 300px; /*相當於300px 50%*/
若只寫一個參數,則另一個參數默認為50%,即背景圖片距div的左邊300px,而豎直方向居中。

6.background:url(../image/header.jpg) no-repeat -300px -100px ;
背景圖片相對於div左上角(0px,0px) 又向左移動了300px,向上移動了100px

7.background:url(../image/header.jpg) no-repeat 30% 30%;

背景圖片的(30%, 30%)的點與其所屬的div的(30%, 30%)的點對齊。


但註意:百分比值同時應用於元素div及其背景圖像。
例如:
(1)當在某一元素裏居中背景圖像時,圖像中被描述為50% 50%的點將與元素中同樣描述的點對齊。
(2)要使背景圖像橫跨元素的三分之一,縱跨三分之二,可以按如下聲明:
background:url(beijing.gif) no-repeat 33% 66%;
這就使得圖像上相對於左上角水平為三分一,垂直為三分之二的那個點與元素中的同樣的點重合。

註意,百分比的水平值總是在前面。如果將上例中的這兩個百分比值交換位置,那麽背景圖像將被放於水平三分之二,垂直三分之一處。同樣,當只給出一個百分比值時,這個值為水平值,而另一個垂直百分比值被假定為50%。當只有一個值給出時,另一個被假定為center。

css背景圖片位置:background的position(轉)