摘要

background-repeat 指定背景图片是否以平铺效果重复出现,以及重复的方式。

初始值repeat
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体visual
计算值a list, each item consisting of two keywords, one per dimension
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

/* 单值语法 */
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属性来决定.

例子

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

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
Different values for X & Y directions (two-value syntax) (Yes) 13.0 (13.0)[1] 9.0 (Yes) (Yes)
round andspacekeywords 未实现 未实现[2] 9.0 10.5 未实现
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?
Multiple backgrounds ? ? ? ? ?
Different values for X & Y directions (two-value syntax) ? ? ? ? ?
round andspacekeywords ? ? ? ? ?

[1] Implemented in bug 548375.

[2] Gecko doesn't implement this feature yet. See bug 548372.

文档标签和贡献者

标签: 
 此页面的贡献者: zhenhua32, SphinxKnight, teoli, TigerSoldier, Ianyang, Mickeyboy
 最后编辑者: zhenhua32,