initial commit

1 files changed, 211 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/background-repeat/index.html b/files/zh-cn/web/css/background-repeat/index.html
new file mode 100644
index 0000000000..897b4786c7
--- /dev/null
+++ b/files/zh-cn/web/css/background-repeat/index.html
@@ -0,0 +1,211 @@
+---
+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>&lt;repeat-style&gt;</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>
+
+<pre class="syntaxbox">{{csssyntax}}
+</pre>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;ol&gt;
+    &lt;li&gt;no-repeat
+        &lt;div class="one"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat
+        &lt;div class="two"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x
+        &lt;div class="three"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-y
+        &lt;div class="four"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+    &lt;li&gt;repeat-x, repeat-y (multiple images)
+        &lt;div class="five"&gt;&amp;nbsp;&lt;/div&gt;
+    &lt;/li&gt;
+&lt;/ol&gt;</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.cdn.mozilla.net/media/redesign/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>