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

>

>“空間”值在CSS背景重複屬性中如何工作？

> CSS背景重複屬性中的“空間”值用於兩個方向上的背景圖像。這些圖像均勻地間隔，第一個也是最後一個圖像觸及了元素的邊緣。如果可用的空間不足以進行更多圖像，則可以調整這些圖像以適合。當您想保持背景圖像的每個重複之間保持一致的空間時，這可能很有用。

>

在CSS背景重複屬性中的“回合”值是什麼？

在CSS背景重新播放中，“回合”值在不剪接的情況下盡可能地重複背景圖像。調整圖像的大小，以便可以在元素內重複多次。當您想確保在沒有任何剪輯的情況下可見整個背景圖像時，這可能很有用。

>“繼承”值在CSS背景重複屬性中如何工作？

>在CSS背景重複屬性中使用“繼承”值，用於使元素從其父母元素中sartar sartharthent reaction-repeat屬性。這意味著該元素的背景圖像的重複值將與其父元素的重複值相同。

我可以使用帶有梯度的CSS背景重複屬性嗎？

是的，您可以將CSS背景重複屬性與梯度一起使用。當與梯度一起使用時，背景重複屬性將根據指定值重複梯度模式。當您要創建重複梯度效應時，這可能很有用。

>“初始”值在CSS背景重複屬性中如何起作用？

> CSS背景重複屬性中的“初始”值用於將屬性設置為其默認值。這意味著背景圖像將水平和垂直重複，這是背景重複屬性的默認行為。

>

>如果我不指定CSS背景重複屬性值的值，會發生什麼？

>如果您不指定CSS背景屬性的值，則默認屬性，則默認值，默認值是“ repoy”。這意味著背景圖像將水平和垂直重複。

我可以僅在一個方向上控制背景圖像的重複嗎？您可以使用“重複X”值水平重複圖像，或“重複Y”值垂直重複圖像。當您想使用背景圖像創建水平或垂直圖案時，這可能很有用。

以上是背景重複（CSS屬性）的詳細內容。更多資訊請關注PHP中文網其他相關文章！