background-repeat

 background-repeat CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

默认情况下,重复的图像被剪裁为元素的大小,但它们可以缩放 (使用 round) 或者均匀地分布 (使用 space).

语法

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

<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

图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.

space

图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. background-position属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.

round

随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.

译者注: 关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.

no-repeat

图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由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">&nbsp;</div>
    </li>
    <li>repeat
        <div class="two">&nbsp;</div>
    </li>
    <li>repeat-x
        <div class="three">&nbsp;</div>
    </li>
    <li>repeat-y
        <div class="four">&nbsp;</div>
    </li>
    <li>repeat-x, repeat-y (multiple images)
        <div class="five">&nbsp;</div>
    </li>
</ol>

CSS

/* Shared for all DIVS in example */
li {margin-bottom: 12px;}
div {
    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
    width: 144px;
    height: 84px;
}

/* 因为 space 和 round 当前没有被广泛支持的, 所以没有添加*/
.one {
    background-repeat: no-repeat;
}
.two {
    background-repeat: repeat;
}
.three {
    background-repeat: repeat-x;
}
.four {
    background-repeat: repeat-y;
}

/* Multiple images */
.five {
    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 3
background-repeat
Candidate Recommendation Added 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 element by defining precisely the background painting area.
CSS Level 2 (Revision 1)
background-repeat
Recommendation No significant changes
CSS Level 1
background-repeat
Recommendation Initial definition

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
background-repeatChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Multiple backgroundsChrome Full support 1Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 10.5Safari Full support 1.3WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support 11Safari iOS Full support 1Samsung Internet Android ?
round and space keywordsChrome Full support 30Edge Full support 12Firefox Full support 49IE Full support 9Opera Full support 17
Full support 17
No support 10.5 — 15
Safari Full support 7WebView Android Full support ≤37Chrome Android Full support 30Firefox Android Full support 49Opera Android Full support 18Safari iOS Full support 8Samsung Internet Android Full support 2.0
Two-value syntax (different values for x & y directions)Chrome Full support 3Edge Full support 12Firefox Full support 13IE Full support 9Opera Full support YesSafari Full support 4.1WebView Android Full support ≤37Chrome Android Full support 18Firefox Android Full support 14Opera Android Full support YesSafari iOS Full support 4Samsung Internet Android Full support 1.0

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown