CSS参考手册
背景和边框 | Backgrounds & Borders
背景重复 | background-repeat
background-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 repeat |
space |
space space |
round |
round round |
no-repeat |
no-repeat no-repeat |
在双值语法中, 第一个值表示水平重复行为, 第二个值表示垂直重复行为. 下面是关于每一个值是怎么工作的具体说明:
repeat |
图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话. |
---|---|
space |
图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. |
round |
随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px. |
no-repeat |
图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由 |
正式语法
<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>
CSS
/* 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. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic Support |
1.0 |
12 |
1.0 |
4 |
3.5 |
1.0 |
Multiple backgrounds |
1.0 |
12 |
3.6 |
9 |
10.5 |
1.3 |
Two-value syntax (different values for x & y directions) |
(Yes) |
12 |
13.0 |
9.0 |
(Yes) |
(Yes) |
round and space keywords |
(Yes) |
12 |
49.0 |
9.0 |
10.5 |
(Yes) |
Feature |
Android |
Chrome for Android |
Edge mobile |
Firefox for Android |
IE mobile |
Opera Android |
iOS Safari |
---|---|---|---|---|---|---|---|
Basic Support |
? |
? |
(Yes) |
1.0 |
? |
? |
? |
Multiple backgrounds |
? |
? |
(Yes) |
(Yes) |
? |
? |
? |
Two-value syntax (different values for x & y directions) |
? |
? |
(Yes) |
13.0 |
? |
? |
? |
round and space keywords |
? |
? |
(Yes) |
49.0 |
? |
? |
? |
另见
- 使用多个背景
在MDN上编辑此页面
© 2005–2017 Mozilla Developer Network and individual contributors.
在CreativeCommonsAttribution-ShareAlike License v2.5或更高版本下获得许可。
https://developer.mozilla.org/en-US/docs/web/css/背景-重复
背景和边框 | Backgrounds & Borders相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。