CSS-背景重複 | background-repeat

ground-repeat

CSS

 屬性定義背景圖像的重複方式。背景圖像可以沿着水準軸，垂直軸，兩個軸重複，或者根本不重複。

/* One-value syntax */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
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: unset;      

預設情況下，重複的圖像被裁剪為元素的大小，但可以縮放以适合（使用

round

）或者從頭到尾均勻分布（使用

space

）。

初始值	repeat
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是繼承屬性	no
适用媒體	visual
計算值	a list, each item consisting of two keywords, one per dimension
Animation type	discrete
正規順序	the unique non-ambiguous order defined by the formal grammar

文法

值

<repeat-style>

單值文法是完整的雙值文法的縮寫：

單值	等價于雙值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

在雙值文法中, 第一個值表示水準重複行為, 第二個值表示垂直重複行為. 下面是關于每一個值是怎麼工作的具體說明:

	圖像會按需重複來覆寫整個背景圖檔所在的區域. 最後一個圖像會被裁剪, 如果它的大小不合适的話.
	圖像會盡可能得重複, 但是不會裁剪. 第一個和最後一個圖像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分布在圖像之間.  background-position 屬性會被忽視, 除非隻有一個圖像能被無裁剪地顯示. 隻在一種情況下裁剪會發生, 那就是圖像太大了以至于沒有足夠的空間來完整顯示一個圖像.
	随着允許的空間在尺寸上的增長, 被重複的圖像将會伸展(沒有空隙), 直到有足夠的空間來添加一個圖像. 當下一個圖像被添加後, 所有的目前的圖像會被壓縮來騰出空間. 例如, 一個圖像原始大小是260px, 重複三次之後, 可能會被伸展到300px, 直到另一個圖像被加進來. 這樣他們就可能被壓縮到225px.
	圖像不會被重複(因為背景圖像所在的區域将可能沒有完全被覆寫). 那個沒有被重複的背景圖像的位置是由 background-position 屬性來決定.

正式文法

<repeat-style>#where 
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}      

示例

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>      

/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.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(https://mdn.mozillademos.org/files/12005/starsolid.gif),
                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
  background-repeat: repeat-x,
                     repeat-y;
  height: 144px;
}      

結果

在這個例子中, 每一個清單項都使用了不同的

background-repeat文法.

規範

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'background-repeat' in that specification.	Candidate Recommendation	Adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level elements by precisely defining the background painting area.
CSS Level 2 (Revision 1)The definition of 'background-repeat' in that specification.	Recommendation	No significant changes.
CSS Level 1The definition of 'background-repeat' in that specification.		Initial definition.

浏覽器相容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	1.0	12		4	3.5
Multiple backgrounds			3.6	9	10.5	1.3
Two-value syntax (different values for x & y directions)	(Yes)		13.0
round and space keywords			49.0

	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
	?

另見

• 使用多個背景