CSS Background Repeating

一、背景圖片重複屬性

在CSS中，可以通過background-repeat屬性來設置背景圖片的重複方式。該屬性有以下可選值：

• repeat：在水平和垂直方向都重複。
• repeat-x：在水平方向重複。
• repeat-y：在垂直方向重複。
• no-repeat：不進行重複。

默認值是repeat。

下面是一個示例，展示了repeat、repeat-x、repeat-y和no-repeat四種重複方式的效果：

div {
  background-image: url("background.jpg");
}
div.repeat {
  background-repeat: repeat;
}
div.repeat-x {
  background-repeat: repeat-x;
}
div.repeat-y {
  background-repeat: repeat-y;
}
div.no-repeat {
  background-repeat: no-repeat;
}

二、背景圖片的定位

背景圖片的定位可以通過background-position屬性來實現。background-position屬性接受兩個值，分別是水平方向和垂直方向上的位置。該屬性的可選值有下面幾種：

• 像素值
• 百分比
• left、center、right、top、bottom

默認值是0% 0%（左上角）。

下面是一個示例，展示了不同的定位方式：

div.top-left {
  background-position: top left;
}
div.center {
  background-position: center;
}
div.bottom-right {
  background-position: bottom right;
}

三、使用多個背景圖片

CSS3允許我們在一個元素上使用多個背景圖片，只需使用逗號分隔即可。多個背景圖片中可以設置不同的重複方式和定位方式，下面是一個示例：

div {
  background-image: url("image1.jpg"), url("image2.jpg");
  background-position: top left, center;
  background-repeat: no-repeat, repeat-x;
}

注意：在使用多個背景圖片時，需要確保背景圖片的大小和位置正確，避免出現不必要的覆蓋或者重複。

四、使用background-size調整背景圖片大小

CSS3還提供了background-size屬性，用於調整背景圖片的大小。background-size屬性接受兩個值，分別是寬度和高度。該屬性的可選值有下面幾種：

• auto：保持原始圖片大小。
• contain：放大圖片，使其適合容器的尺寸，同時保持長寬比。
• cover：縮小圖片，使其適合容器的尺寸，同時保持長寬比。
• 像素值、百分比

下面是一個示例，展示了使用background-size調整背景圖片大小的效果：

div {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 50%;
}

該示例中，將background-size設置為50%，即將背景圖片縮小到原來的50%。

五、使用background-attachment固定背景圖片

background-attachment屬性用於設置背景圖片是否隨滾動條進行滾動。該屬性的可選值有scroll和fixed。scroll表示隨滾動條進行滾動，fixed表示固定在容器中的某個位置。下面是一個示例：

div {
  background-image: url("background.jpg");
  background-attachment: fixed;
}

在該示例中，背景圖片將被固定在容器中的一個位置，無論滾動條怎樣滾動，背景圖片都不會移動。