HTML背景圖片不重複平鋪

在HTML中，我們經常需要設置一個背景圖片。有時我們需要讓這個背景圖片不重複平鋪，這樣才能達到最佳的視覺效果。

一、background-repeat屬性

在HTML中設置背景圖片可以使用CSS的background屬性。而可以讓背景圖片不重複平鋪使用CSS的background-repeat屬性。background-repeat屬性有以下取值：

background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;

其中，repeat表示X,Y軸都進行平鋪；repeat-x表示只在X軸進行平鋪；repeat-y表示只在Y軸進行平鋪；no-repeat表示不進行平鋪。

我們可以通過以下代碼來實現不重複平鋪的背景圖片：

body {
  background-image: url("image/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

在上述代碼中，我們使用了background-image屬性設置背景圖片的路徑，並將background-repeat屬性的取值設置為no-repeat，這樣就實現了不重複平鋪。另外，我們還使用了background-size屬性將背景圖片根據容器的大小進行自適應。

二、background-position屬性

有時候，我們可能會想要設置背景圖片在容器中的顯示位置。這時我們就可以使用CSS的background-position屬性。background-position可以取以下方式的值：

background-position: left top;
background-position: left center;
background-position: left bottom;
background-position: center top;
background-position: center center;
background-position: center bottom;
background-position: right top;
background-position: right center;
background-position: right bottom;

其中，left、center、right表示水平方向位置，top、center、bottom表示垂直方向位置。通過設置background-position屬性，我們可以將背景圖片設置在自己想要的位置。

下面是一個示例代碼：

body {
  background-image: url("image/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

在上述代碼中，我們使用了background-position屬性將背景圖片的位置設置在容器的中間位置。

三、background-attachment屬性

background-attachment屬性用於指定背景圖片是否隨容器一起滾動。其屬性值有以下兩種：

background-attachment: fixed;
background-attachment: scroll;

其中，fixed表示背景圖片隨頁面滾動而不動，scroll表示背景圖片隨容器滾動而滾動。

下面是一個示例代碼：

body {
  background-image: url("image/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

在上述代碼中，我們使用了background-attachment屬性將背景圖片固定在了頁面上。

四、background屬性

除了單獨設置background-repeat、background-position、background-attachment屬性外，我們還可以使用background屬性來一次性設置這三個屬性。如下所示：

body {
  background: url("image/bg.jpg") no-repeat center center fixed;
}

在上述代碼中，我們使用了background屬性，將背景圖片設置為不重複平鋪、位於容器中間、固定在頁面上。

總結

以上就是設置HTML背景圖片不重複平鋪的方法。我們可以使用CSS的background-repeat、background-position、background-attachment屬性來分別控制背景圖片的重複平鋪、位置和跟隨機制。另外，我們還可以使用background屬性一次性設置以上三個屬性。