background-repeat

**background-repeat** CSS 属性设置背景图像的重复方式。背景图像可以沿着水平和垂直轴重复，也可以不重复。

尝试一下

语法

css
/* 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-position CSS 属性定义。

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                                     |
  [ repeat | space | round | no-repeat ]{1,2}

示例

设置 background-repeat

HTML

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

css
/* Shared for all DIVS in example */
ol,
li {
  margin: 0;
  padding: 0;
}
li {
  margin-bottom: 12px;
}
div {
  background-image: url(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(starsolid.gif), url(favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}

结果

在这个示例中，每个列表项都与一个不同的background-repeat值相匹配。

规范

规范
CSS 背景和边框模块级别 3
# the-background-repeat

浏览器兼容性

BCD 表格只能在浏览器中加载

另请参阅