CSS的背景屬性background-position

CSS的背景屬性background-position，主要用來定位背景圖片的位置。

background-position的數值分成三種表示方式：關鍵字、像素、百分比

關鍵字：background-position:top left;　值有top、bottom、left、right、center

像素：background-position:0px 0px;

百分比：background-position:0% 0%;

前兩者指定的是背景圖片左上角相對於容器左上角的位置。（百分比的情況較特殊，後面會解釋。）

EX:

background-position: 10px 20px; 第一個數值(10px)指的是水平位置；第二個數值(20px)指的是垂直位置

也就是說從左上角算起，將背景圖往右移10px、往下移20px

background-position: top center;

背景圖設定在從容器左上角算起最上方並中間的位置

百分比表示：

background-position:

背景圖本身(x% y%)的那個點會與容器(x% y%)的那個點重合

例：

background-position: 20% 40%;

背景圖本身(20% 40%)的那個點會與容器(20% 40%)的那個點重合

若以px或%表示時，數值可以用負的。

如:

background-position: -10px -30px;

從左上角算起，背景圖會往左移10px、往上移30px

註:因為背景圖片只能在容器內顯示，所以超出的部分會被切掉。

1. 數值與百分比是可以一起用的。(如:background-position:15px 60%;)

2. 數值/百分比與關鍵字是無法混用的。(如:background-position:center 20%;)

3. 若只輸入一個數值，會隨數值改變的只有水平位置。