深入解析background-img

一、基本概念

background-img是CSS屬性中的一個，指的是網頁元素的背景圖片。

在設置background-img屬性時，通常需要指定圖片的位置和大小，以及如何填充元素背景。如下面所示：

selector {
  background-image: url("image.jpg"); /* 圖片地址 */
  background-repeat: no-repeat;      /* 背景圖片是否重複 */
  background-position: center;       /* 圖片位置 */
  background-size: cover;            /* 圖片大小 */
}

二、圖片地址

在設置background-img屬性時，首先需要確定圖片的地址，可以直接指定圖片的絕對或相對路徑。

例如，下面的代碼指定了一個相對於當前網頁的圖片地址：

selector {
  background-image: url("image.jpg"); /* 相對路徑 */
}

如果圖片地址指定的是絕對路徑，則可以不考慮當前網頁的位置，直接指定圖片的位置：

selector {
  background-image: url("http://example.com/image.jpg"); /* 絕對路徑 */
}

三、背景圖片是否重複

當一個元素的寬度或高度比背景圖片大時，背景圖片會重複顯示。

如果不希望背景圖片重複顯示，可以設置background-repeat屬性為no-repeat：

selector {
  background-repeat: no-repeat; /* 背景圖片不重複 */
}

如果希望背景圖片在水平方向或垂直方向上重複顯示，可以分別設置background-repeat屬性為repeat-x或repeat-y：

selector {
  background-repeat: repeat-x; /* 背景圖片在水平方向上重複 */
}

四、圖片位置

可以通過設置background-position屬性，控制背景圖片在元素中的位置。

常見的設置值有top、bottom、left、right、center等。以center為例，下面的代碼指定了背景圖片位於元素中央：

selector {
  background-position: center; /* 背景圖片位於元素中央 */
}

還可以通過設置百分比值，來精確控制背景圖片的位置。例如，下面的代碼指定了背景圖片位於元素上下中央，左右保持20%距離：

selector {
  background-position: 20% 50%; /* 背景圖片位於元素上下中央，左右保持20%距離 */
}

五、圖片大小

可以通過設置background-size屬性，控制背景圖片在元素中的大小。

常見的設置值有cover和contain。以cover為例，下面的代碼指定了背景圖片會被拉伸並填充滿整個元素：

selector {
  background-size: cover; /* 背景圖片會被拉伸並填充滿整個元素 */
}

如果希望背景圖片按比例縮放，以顯示在元素內部並保持完整性，可以設置background-size屬性為contain：

selector {
  background-size: contain; /* 背景圖片按比例縮放，以顯示在元素內部並保持完整性 */
}

結語

在使用background-img屬性時，需要根據實際情況，結合圖片的大小、尺寸、形狀以及元素的布局，靈活設置各個參數，以得到最佳的效果。