背景重複（CSS屬性）-css教學-PHP中文網

background-repeat (CSS property)

背景重複（CSS屬性）

描述

背景重複屬性控制是否重複一個背景圖像（瓷磚），如果重複該屬性，則該屬性將沿指定的軸（x，y或兩者）定義圖像。默認情況下，沿垂直軸和水平軸重複一個背景圖像，並在兩個方向上重複。我們使用背景重複屬性來指定應重複圖像的軸。

重複背景圖像時，它首先根據背景位置屬性放置，然後在兩個方向上從該點開始重複。例如，位於中心中心（元素中心）的背景位置，具有重複的背景重複值的背景圖像將在X和Y軸上的兩個方向上重複，即從中心，從中心開始。

元素的背景是該元素的寬度和高度所覆蓋的區域（無論這些尺寸是明確設置的，還是內容決定它們）；它還包括填充和邊界覆蓋的區域。應用於元素的背景色（或背景圖像）將出現在該元素的前景含量下方，以及該元素的填充和邊框屬性所覆蓋的區域。如果元素具有透明（或虛線或虛線）邊界，並且在邊界下（或點之間）看到背景。請注意，Internet Explorer版本和包括6個不支持透明邊界。 > 如果要顯示背景圖像，則必須看到所討論元素的某些區域。如果該元素沒有內在的高度（由其內容定義，或由其尺寸定義），則將看不到背景。如果元素只包含尚未清理的浮子孩子（請參閱清晰），則不會顯示出來，因為該元素的高度將為零。

在CSS2.1規範中未定義

背景圖像在內聯元素上的平鋪和定位，但可以在以後的版本中解決。

示例

此樣式規則導致一個背景圖像分配給元素，並帶有ID“示例”，以沿 x

軸重複：

value

重複 >

值重複可確保在兩個方向上重複背景圖像（即，左右，上下），並沿兩個軸重複，直到元素的背景被完全覆蓋為止。

#example{
  background-repeat: repeat-x;
}

登入後複製

重複X

值重複X可確保僅沿 x 軸重複背景圖像（即兩個方向的水平軸 - 左左右），直到元素的背景沿該軸完全覆蓋為止。 >>>>>>>>>

>重複

值重複y可確保僅沿軸（即，兩個方向上的垂直軸 - up和向下）重複背景圖像，直到元素的背景沿該軸完全覆蓋。 no-repeat

值no-Repeat可確保不會在任何方向上重複背景圖像，並且僅將圖像的一個實例放置在背景位置指定的坐標上。

。

如果沒有指定背景位置，圖像放置在元素的默認左上位置（0,0）。

經常詢問有關CSS背景重複屬性的問題（常見問題解答）

>在CSS背景重複屬性中“重複X”和“重複Y”之間有什麼區別？

>在CSS背景重複屬性中，“重複X”和“重複X”和“重複Y”值分別用於控制背景圖像的重複水平和垂直。當使用“重複X”時，僅水平重複背景圖像，從左到右創建連續圖案。另一方面，當使用“重複Y”時，僅垂直重複背景圖像，從上到下創建連續圖案。當您想控制背景圖像重複的方向時，這些屬性很有用。

>“ no-repeat'值在CSS背景 - 重複屬性中如何工作？

>

>“ no-repeat>”>“ no-repeat”值在CSS背景重複屬性中只需在您想要的背景圖像時就只能出現一次並且不重複一次。設置此值時，背景圖像將放置在背景位置屬性指定的位置上，並且不會重複或瓷磚。當您擁有一個單個圖像而無需重複的單個圖像時。當您使用多個背景圖像時，這特別有用。您可以通過用逗號分隔每個值來為每個背景圖像指定不同的重複值。第一個值對應於第一個背景圖像，第二個值對第二個圖像，依此類推。