試一試
background-repeat: repeat-x;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: space repeat;
<section id="default-example">
<div id="example-element"></div>
</section>
#example-element {
background: #cccccc url("/shared-assets/images/examples/moon.jpg") center /
120px;
min-width: 100%;
min-height: 100%;
}
語法
/* Keyword values */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
/* Two-value syntax: horizontal | vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: revert;
background-repeat: revert-layer;
background-repeat: unset;
描述
該屬性接受一個由逗號分隔的兩個 <repeat-style> 關鍵字列表，或一個關鍵字作為兩個值的簡寫。當提供兩個值時，第一個值定義水平重複行為，第二個值定義垂直重複行為。屬性值可以用於僅水平重複、僅垂直重複或完全不重複。
預設值為 repeat repeat。使用此值時，背景影像會保持其固有的縱橫比，在水平和垂直方向上重複以覆蓋整個背景繪製區域，邊緣的影像會被裁剪為元素的大小。哪些邊緣被裁剪取決於相應的 background-position 屬性值。影像重複的次數以及邊緣影像被裁剪的程度取決於背景繪製區域的大小和相應的 background-size 屬性值。
重複的影像可以均勻地隔開，確保重複的影像在不被裁剪的情況下保持其縱橫比。使用 space 值時，如果背景繪製區域的縱橫比與影像不同，或者在任一方向上的尺寸不是背景尺寸的倍數，就會出現未被背景影像覆蓋的區域。
另外，重複的背景影像可以被拉伸以覆蓋整個區域而不被裁剪。使用 round 時，如果背景影像的縱橫比與繪製區域的縱橫比不同，重複的影像將被拉伸以填充所有可用空間，直到有空間可以再新增一個重複的影像。例如，假設一個背景影像為 100px x 100px，背景繪製區域為 1099px x 750px，影像將在水平方向重複 10 次，垂直方向重複 7 次，總共重複 70 次，每個影像在兩個方向上都被拉伸為 109.9px x 105px，這會改變影像的縱橫比並可能使其失真。如果繪製區域的寬度增加 1px，變為 1100px 寬，則水平方向將可以容納第 11 個影像，總共重複 77 次，每個影像將被繪製為 100px 寬和 105px 高，僅在垂直方向上被拉伸。
值
該屬性接受一個由逗號分隔的兩個 <repeat-style> 關鍵字列表，或一個關鍵字作為兩個值的簡寫。第一個值是水平重複方式，第二個值是垂直重複行為。如果只設置了一個非 repeat-x 或 repeat-y 的值，則該值將應用於兩個方向。這些值包括：
repeat-
預設值。影像會重複儘可能多的次數以覆蓋整個背景影像繪製區域，如果繪製區域的尺寸不是背景影像尺寸的倍數，邊緣的影像將被裁剪。
no-repeat-
影像不重複（因此背景影像繪製區域不一定會被完全覆蓋）。不重複的背景影像的位置由
background-positionCSS 屬性定義。 space-
影像會盡可能多地重複而不被裁剪。第一個和最後一個影像被固定在元素的兩側，空白空間會均勻地分佈在影像之間。
background-position屬性會被忽略，除非只有一個影像可以在不被裁剪的情況下顯示。使用space時發生裁剪的唯一情況是空間不足以顯示一個影像。 round-
隨著可用空間的增大，重複的影像會被拉伸（不留間隙），直到有空間可以再新增一個影像。這是唯一一個可能導致背景影像縱橫比失真的
<repeat-style>值，這種情況會在背景影像的縱橫比與背景繪製區域的縱橫比不同時發生。 repeat-x-
repeat no-repeat的簡寫，背景影像僅水平重複，如果繪製區域的寬度不是背景影像寬度的倍數，邊緣的影像將被裁剪。 repeat-y-
no-repeat repeat的簡寫，背景影像僅垂直重複，如果繪製區域的高度不是背景影像高度的倍數，邊緣的影像將被裁剪。
當提供一個 <repeat-style> 關鍵字時，該值是以下雙值語法的簡寫：
| 單個值 | 等效的雙值語法 |
|---|---|
repeat-x |
repeat no-repeat |
repeat-y |
no-repeat repeat |
repeat |
repeat repeat |
space |
space space |
round |
round round |
no-repeat |
no-repeat no-repeat |
正式定義
| 初始值 | repeat |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 計算值 | 一個列表，每個專案由兩個關鍵字組成，每個維度一個 |
| 動畫型別 | 離散 |
正式語法
background-repeat =
<repeat-style>#
<repeat-style> =
repeat-x |
repeat-y |
<repetition>{1,2}
<repetition> =
repeat |
space |
round |
no-repeat
示例
設定 background-repeat
HTML
<ol>
<li>
no-repeat
<div class="one"></div>
</li>
<li>
repeat
<div class="two"></div>
</li>
<li>
repeat-x
<div class="three"></div>
</li>
<li>
repeat-y
<div class="four"></div>
</li>
<li>
space
<div class="five"></div>
</li>
<li>
round
<div class="six"></div>
</li>
<li>
repeat-x, repeat-y (multiple images)
<div class="seven"></div>
</li>
</ol>
CSS
/* Shared for all DIVS in example */
ol,
li {
margin: 0;
padding: 0;
}
li {
margin-bottom: 12px;
}
div {
background-image: url("star-solid.gif");
width: 160px;
height: 70px;
}
/* Background repeats */
.one {
background-repeat: no-repeat;
}
.two {
background-repeat: repeat;
}
.three {
background-repeat: repeat-x;
}
.four {
background-repeat: repeat-y;
}
.five {
background-repeat: space;
}
.six {
background-repeat: round;
}
/* Multiple images */
.seven {
background-image:
url("star-solid.gif"), url("/shared-assets/images/examples/favicon32.png");
background-repeat: repeat-x, repeat-y;
height: 144px;
}
結果
在此示例中，每個列表項都匹配一個不同的 background-repeat 值。
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-repeat |
瀏覽器相容性
載入中…