CSS Background Position

CSS屬性background-position用於規定背景圖片在元素中的位置，並且可以通過指定位置值的方式來調整背景圖片的位置。如果您的網頁中使用了大量的背景圖片，那麼這個CSS屬性就是您必須掌握的一個技能。

一、基本用法

background-position屬性需要兩個值來指定位置，分別為橫向位置和縱向位置，如果只指定一個值，那麼第二個值默認為center。例如下面的代碼可以將背景圖片定位在元素的左上角：

div {
  background-image: url(path/to/image.jpg);
  background-position: 0% 0%;
}

除了使用百分數來指定位置值，還可以使用px、em、rem、vw、vh等單位。例如下面的代碼可以將背景圖片定位在距離元素左側50像素，上側100像素的位置：

div {
  background-image: url(path/to/image.jpg);
  background-position: 50px 100px;
}

需要注意的是，如果您使用的是背景圖片平鋪的情況下，那麼background-position屬性只會影響到一張圖片的位置。如果需要指定多個圖片的位置，需要使用background-position-x和background-position-y屬性，分別指定橫向和縱向位置。

二、關於百分數

使用百分數來指定背景圖片的位置，可以讓頁面元素自適應不同的屏幕大小和解析度，這對於實現響應式布局非常有用。但是，需要注意的是百分數的參照物並不是元素本身，而是元素的padding box。

假設頁面中有一個div元素，其寬度為200px，高度為100px，同時指定了10px的padding，如下所示：

div {
  width: 200px;
  height: 100px;
  padding: 10px;
  background-image: url(path/to/image.jpg);
  background-position: 50% 50%;
}

那麼，背景圖片的實際位置會在橫向和縱向上進行調整，具體位置如下圖所示：

從上圖可以看出，background-position: 50% 50%; 在X、Y方向分別對應了padding box的中心位置，也就是坐標(110px, 60px)的位置。

三、使用關鍵字

除了使用像素和百分數來指定背景圖片的位置，還可以使用一些特殊的關鍵字。常用的關鍵字包括：

• left：將背景圖片定位在元素的左側
• right：將背景圖片定位在元素的右側
• top：將背景圖片定位在元素的頂部
• bottom：將背景圖片定位在元素的底部
• center：將背景圖片定位在元素的中心

例如下面的代碼可以將背景圖片定位在元素右下角：

div {
  background-image: url(path/to/image.jpg);
  background-position: right bottom;
}

需要注意的是，這些關鍵字只是縮寫，也可以使用橫向和縱向位置值來實現相同的效果。例如下面的代碼與上面的代碼效果相同：

div {
  background-image: url(path/to/image.jpg);
  background-position: 100% 100%;
}

四、結語

CSS屬性background-position是實現網頁背景圖片位置的重要手段，而對於響應式設計更是必不可少的。希望本文可以讓大家對背景圖片的定位有更加深入地了解。