CSS中的background-position屬性詳解

一、background-position是什麼

在網頁設計中，背景圖像的位置往往需要根據實際情況進行調整。CSS中的background-position屬性就是用來控制背景圖像的位置的。

具體來說，background-position指定了背景圖像的位置，可以使用一組關鍵字或者百分比值配合各種單位進行設定。

二、基本用法

background-position的基本用法非常簡單，只需要像下面這樣設置即可：

background-position: x y;

其中，x和y分別指定背景圖像的水平位置和垂直位置。可以使用以下這些單位來設定它們的值：

• 像素(px)
• 百分比(%)
• 單詞關鍵字，如：left、right、top、bottom、center

以下是一個例子，背景圖像位於容器的左上角：

div {
  background-image: url("example.jpg");
  background-position: 0 0;
}

三、關鍵字值

關鍵字值指定背景圖像在背景區域中的位置。用單詞關鍵字來設定，可以使用以下的關鍵字：

• left：背景圖像位於左邊，距離容器左邊沿有一定距離
• right：背景圖像位於右邊，距離容器右邊沿有一定距離
• top：背景圖像位於上邊，距離容器上邊沿有一定距離
• bottom：背景圖像位於下邊，距離容器下邊沿有一定距離
• center：背景圖像位於中心

以下是一個例子：

div {
  background-image: url("example.jpg");
  background-position: left bottom;
}

四、百分比值

百分比值指定背景圖像相對於背景區域的位置。取值範圍從0%到100%。以下是一些例子：

/* 這會把背景圖像向右下偏移50%的位置 */
div {
  background-image: url("example.jpg");
  background-position: 50% 50%;
}

/* 這會使背景圖像水平方向居中 */
div {
  background-image: url("example.jpg");
  background-position: center 50%;
}

五、多值語法

background-position屬性還支持將多個值組合在一起使用的語法，可以用逗號分開每個值：

/* 這會將背景圖像向上移動20px，並保持水平方向不變 */
div {
  background-image: url("example.jpg");
  background-position: center top, left 20px;
}

這個例子中，背景圖像被設置為同時位於容器的水平方向中央以及上邊緣，同時還被垂直移動了20像素。

六、出現沒有預料到的問題？

1、默認情況下，背景圖像的位置是相對於容器左上角進行定位。當使用百分比值時，背景圖像的位置相對於容器的大小而不是內容來計算，因此如果不指定大小，可能會導致背景圖像位置出現偏差。

2、如果使用 background-attachment 屬性設置背景圖像會隨著頁面滾動而移動，這時使用 background-position 會使得背景圖像的相對位置發生變化。

七、總結

background-position屬性是CSS中用來指定背景圖像位置的屬性，其基本語法是background-position: x y。該屬性支持多種值單位，如像素、百分比和單詞關鍵字等。同時還支持多值語法，可以同時指定多個背景圖像位置。但需要注意的是，在使用百分比值時，背景圖像的位置是相對於容器的大小而不是內容。