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