CSS控制背景圖片的位置主要通過background-position屬性來實現(xiàn)，這個屬性可以***地定位背景圖片在元素中的位置。

1. 水平位置

left背景圖片將位于元素的左側(cè)。

right背景圖片將位于元素的右側(cè)。

center背景圖片將位于元素的中心。

10%背景圖片將位于元素寬度的10%處。

50%背景圖片將位于元素寬度的50%處。

90%背景圖片將位于元素寬度的90%處。

2. 垂直位置

top背景圖片將位于元素的頂部。

bottom背景圖片將位于元素的底部。

middle背景圖片將位于元素的中間。

10%背景圖片將位于元素高度的10%處。

50%背景圖片將位于元素高度的50%處。

90%背景圖片將位于元素高度的90%處。

示例

假設(shè)你有一個元素，你希望背景圖片位于元素的右下角，你可以這樣寫CSS：

.element {
  background-position: right bottom;
}

如果你希望背景圖片位于元素的中心，你可以這樣寫CSS：

.element {
  background-position: center center;
}

如果你希望背景圖片位于元素的左側(cè)和底部，你可以這樣寫CSS：

.element {
  background-position: left bottom;
}

3. 復(fù)合值

background-position屬性還可以接受兩個值，分別指定水平和垂直位置。

.element {
  background-position: right 50%;
}

這將使背景圖片位于元素的右側(cè)，且垂直位置為元素高度的50%。

4. 百分比和像素值

除了關(guān)鍵字外，background-position還支持百分比和像素值。

.element {
  background-position: 200px 50px;
}

這將使背景圖片在水平方向上距離元素左側(cè)200像素，垂直方向上距離元素頂部50像素。

通過background-position屬性，你可以***地控制背景圖片在元素中的位置，無論是使用關(guān)鍵字、百分比還是像素值，都能幫助你實現(xiàn)所需的效果。