background-repeat
background-repeat
CSS 属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
Try it
默认情况下,重复的图像被剪裁为元素的大小,但它们可以缩放 (使用 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
属性来决定.
标准语法
例子
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>repeat-x, repeat-y (multiple images)
<div class="five"> </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.mozilla.org/static/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 |
浏览器兼容性
BCD tables only load in the browser