试一试
background-repeat: repeat-x;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: space repeat;
<section id="default-example">
<div id="example-element"></div>
</section>
#example-element {
background: #cccccc url("/shared-assets/images/examples/moon.jpg") center /
120px;
min-width: 100%;
min-height: 100%;
}
语法
/* Keyword values */
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
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: revert;
background-repeat: revert-layer;
background-repeat: unset;
描述
该属性接受一个由逗号分隔的两个 <repeat-style> 关键字列表，或一个关键字作为两个值的简写。当提供两个值时，第一个值定义水平重复行为，第二个值定义垂直重复行为。属性值可以用于仅水平重复、仅垂直重复或完全不重复。
默认值为 repeat repeat。使用此值时，背景图像会保持其固有的纵横比，在水平和垂直方向上重复以覆盖整个背景绘制区域，边缘的图像会被裁剪为元素的大小。哪些边缘被裁剪取决于相应的 background-position 属性值。图像重复的次数以及边缘图像被裁剪的程度取决于背景绘制区域的大小和相应的 background-size 属性值。
重复的图像可以均匀地隔开，确保重复的图像在不被裁剪的情况下保持其纵横比。使用 space 值时，如果背景绘制区域的纵横比与图像不同，或者在任一方向上的尺寸不是背景尺寸的倍数，就会出现未被背景图像覆盖的区域。
另外，重复的背景图像可以被拉伸以覆盖整个区域而不被裁剪。使用 round 时，如果背景图像的纵横比与绘制区域的纵横比不同，重复的图像将被拉伸以填充所有可用空间，直到有空间可以再添加一个重复的图像。例如，假设一个背景图像为 100px x 100px，背景绘制区域为 1099px x 750px，图像将在水平方向重复 10 次，垂直方向重复 7 次，总共重复 70 次，每个图像在两个方向上都被拉伸为 109.9px x 105px，这会改变图像的纵横比并可能使其失真。如果绘制区域的宽度增加 1px，变为 1100px 宽，则水平方向将可以容纳第 11 个图像，总共重复 77 次，每个图像将被绘制为 100px 宽和 105px 高，仅在垂直方向上被拉伸。
值
该属性接受一个由逗号分隔的两个 <repeat-style> 关键字列表，或一个关键字作为两个值的简写。第一个值是水平重复方式，第二个值是垂直重复行为。如果只设置了一个非 repeat-x 或 repeat-y 的值，则该值将应用于两个方向。这些值包括：
repeat-
默认值。图像会重复尽可能多的次数以覆盖整个背景图像绘制区域，如果绘制区域的尺寸不是背景图像尺寸的倍数，边缘的图像将被裁剪。
no-repeat-
图像不重复（因此背景图像绘制区域不一定会被完全覆盖）。不重复的背景图像的位置由
background-positionCSS 属性定义。 space-
图像会尽可能多地重复而不被裁剪。第一个和最后一个图像被固定在元素的两侧，空白空间会均匀地分布在图像之间。
background-position属性会被忽略，除非只有一个图像可以在不被裁剪的情况下显示。使用space时发生裁剪的唯一情况是空间不足以显示一个图像。 round-
随着可用空间的增大，重复的图像会被拉伸（不留间隙），直到有空间可以再添加一个图像。这是唯一一个可能导致背景图像纵横比失真的
<repeat-style>值，这种情况会在背景图像的纵横比与背景绘制区域的纵横比不同时发生。 repeat-x-
repeat no-repeat的简写，背景图像仅水平重复，如果绘制区域的宽度不是背景图像宽度的倍数，边缘的图像将被裁剪。 repeat-y-
no-repeat repeat的简写，背景图像仅垂直重复，如果绘制区域的高度不是背景图像高度的倍数，边缘的图像将被裁剪。
当提供一个 <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 |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 否 |
| 计算值 | 一个列表，每个项目由两个关键字组成，每个维度一个 |
| 动画类型 | 离散 |
正式语法
background-repeat =
<repeat-style>#
<repeat-style> =
repeat-x |
repeat-y |
<repetition>{1,2}
<repetition> =
repeat |
space |
round |
no-repeat
示例
设置 background-repeat
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("star-solid.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("star-solid.gif"), url("/shared-assets/images/examples/favicon32.png");
background-repeat: repeat-x, repeat-y;
height: 144px;
}
结果
在此示例中，每个列表项都匹配一个不同的 background-repeat 值。
规范
| 规范 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-repeat |
浏览器兼容性
加载中…