1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
|
---
title: background-repeat
slug: Web/CSS/background-repeat
tags:
- CSS_参考
- background-repeat
translation_of: Web/CSS/background-repeat
---
<p>{{ CSSRef() }}</p>
<p> <strong><code>background-repeat</code></strong> <a href="https://developer.mozilla.org/en-US/docs/CSS">CSS</a> 属性定义背景图像的重复方式。背景图像可以沿着水平轴，垂直轴，两个轴重复，或者根本不重复。</p>
<p>{{EmbedInteractiveExample("pages/css/background-repeat.html")}}</p>
<div class="hidden">
<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
</div>
<p>默认情况下，重复的图像被剪裁为元素的大小，但它们可以缩放 (使用 <code>round</code>) 或者均匀地分布 (使用 <code>space</code>).</p>
<h2 id="语法">语法</h2>
<pre><code>/* 单值语法 */
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;</code></pre>
<h3 id="值">值</h3>
<dl>
<dt><code><repeat-style></code></dt>
<dd>单值语法是完整的双值语法的简写:</dd>
<dd>
<table>
<tbody>
<tr>
<td><strong>单值</strong></td>
<td><strong>等价于双值</strong></td>
</tr>
<tr>
<td><code>repeat-x</code></td>
<td><code>repeat no-repeat</code></td>
</tr>
<tr>
<td><code>repeat-y</code></td>
<td><code>no-repeat repeat</code></td>
</tr>
<tr>
<td><code>repeat</code></td>
<td><code>repeat repeat</code></td>
</tr>
<tr>
<td><code>space</code></td>
<td><code>space space</code></td>
</tr>
<tr>
<td><code>round</code></td>
<td><code>round round</code></td>
</tr>
<tr>
<td><code>no-repeat</code></td>
<td><code>no-repeat no-repeat</code></td>
</tr>
</tbody>
</table>
在双值语法中, 第一个值表示水平重复行为, 第二个值表示垂直重复行为. 下面是关于每一个值是怎么工作的具体说明:</dd>
<dd>
<table class="standard-table">
<tbody>
<tr>
<td><code>repeat</code></td>
<td>
<p>图像会按需重复来覆盖整个背景图片所在的区域. 最后一个图像会被裁剪, 如果它的大小不合适的话.</p>
</td>
</tr>
<tr>
<td><code>space</code></td>
<td>
<p>图像会尽可能得重复, 但是不会裁剪. 第一个和最后一个图像会被固定在元素(element)的相应的边上, 同时空白会均匀地分布在图像之间. {{cssxref("background-position")}}属性会被忽视, 除非只有一个图像能被无裁剪地显示. 只在一种情况下裁剪会发生, 那就是图像太大了以至于没有足够的空间来完整显示一个图像.</p>
</td>
</tr>
<tr>
<td><code>round</code></td>
<td>
<p>随着允许的空间在尺寸上的增长, 被重复的图像将会伸展(没有空隙), 直到有足够的空间来添加一个图像. 当下一个图像被添加后, 所有的当前的图像会被压缩来腾出空间. 例如, 一个图像原始大小是260px, 重复三次之后, 可能会被伸展到300px, 直到另一个图像被加进来. 这样他们就可能被压缩到225px.</p>
<p>译者注: 关键是浏览器怎么计算什么时候应该添加一个图像进来, 而不是继续伸展.</p>
</td>
</tr>
<tr>
<td><code>no-repeat</code></td>
<td>
<p>图像不会被重复(因为背景图像所在的区域将可能没有完全被覆盖). 那个没有被重复的背景图像的位置是由{{cssxref("background-position")}}属性来决定.</p>
</td>
</tr>
</tbody>
</table>
</dd>
</dl>
<h3 id="标准语法">标准语法</h3>
{{csssyntax}}
<h2 id="例子">例子</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: 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;
}</pre>
<h3 id="结果">结果</h3>
<p>在这个例子中, 每一个列表项都使用了不同的<code>background-repeat语法.</code></p>
<p>{{EmbedLiveSample("例子", 240, 360)}}</p>
<h2 id="规范">规范</h2>
<table>
<thead>
<tr>
<th scope="col">Specification 规范</th>
<th scope="col">Status 状态</th>
<th scope="col">Comment 内容</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}</td>
<td>{{Spec2('CSS3 Backgrounds')}}</td>
<td>Added support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the <code>space</code> and <code>round</code> keywords, and for backgrounds on inline-level element by defining precisely the background painting area.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No significant changes</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
<p>{{Compat("css.properties.background-repeat")}}</p>
|
