background-repeat

如果指定了 background-image 属性，则 CSS 中的 background-repeat 属性定义是否（以及如何）重复该图像。

html {
  background-image: url(logo.png);
  background-repeat: repeat-x; 
}

值

background-repeat 属性接受以下值

/* Single value syntax */
background-repeat: repeat; /* Default value */
background-repeat: repeat-x;
background-repeat: repeat-y
background-repeat: no-repeat;
background-repeat: round;
background-repeat: space;

/* Two value syntax: <horizontal> | <vertical> */
background-repeat: repeat no-repeat;
background-repeat: round space;
background-repeat: repeat round;
background-repeat: no-repeat space;
background-repeat: round no-repeat;

/* Global values */
background-repeat: inherit;
background-repeat: initial;
background-repeat: revert;
background-repeat: revert-layer;
background-repeat: unset;

• repeat：在两个方向上平铺图像。这是默认值。
• repeat-x：水平平铺图像。
• repeat-y：垂直平铺图像。
• no-repeat：不平铺；图像仅显示一次。
• round：平铺，但从不裁剪图像，尽可能多地平铺并根据需要拉伸图像的宽度或高度。因此，如果剩余的宽度小于半个图像宽度，则拉伸；如果大于，则拉伸。
• space：平铺，但从不裁剪图像，尽可能多地平铺并在每个平铺之间留出均匀的间距。

语法

background-repeat: repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2};

• 初始值：repeat
• 应用于：所有元素
• 继承：否
• 百分比：N/A
• 计算值：列表，每个项目都是一对关键字，每个维度一个
• 动画类型：离散

background-repeat 属性接受一个或两个值。单个值设置背景图像在水平和垂直方向上的重复模式。两个值分别单独设置每个方向上的重复模式。

单个值	与…相同
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

background 简写属性

background-repeat 属性是 background 简写属性的组成部分。它在操作顺序上位于 background-size 之后。

body {
  background:
     url(sweettexture.jpg)     /* background-image */
     top center / 100px 100px  /* background-bposition / background-size */
     no-repeat                 /* background-repeat */
     fixed                     /* background-attachment */
     padding-box               /* background-origin */
     content-box               /* background-clip */
     red;                      /* background-color */
}

多个背景

如果您正在处理 多个背景，还可以使用逗号分隔多个值。假设我们有一个具有两个背景图像的元素。

.some-element {
  background-image: url("star-outline.svg"), url("star-filled.svg");
}

只要我们用逗号分隔它们，我们就可以在同一个声明中为每个背景图像设置 background-repeat 行为。

.some-element {
  background-image: url("star-outline.svg"), url("star-filled.svg");
  background-repeat: no-repeat, repeat-x;
}

如果没有逗号，CSS 只是认为您正在使用单值语法并为两个背景图像设置垂直和水平方向。

而且，是的，我们确实也可以用逗号分隔两个值的语法。

.some-element {
  background-image: url("star-outline.svg"), url("star-filled.svg");
  background-repeat: no-repeat repeat-x, no-repeat repeat-y;
}

换句话说，我们可以通过多种方式配置背景图像的重复方式，并且可以根据需要使用任意数量的背景图像。

演示

使用以下演示中的控件，比较每个属性值（以及它们的组合）的重复模式。

当您可以调整包含背景图像的元素的大小时，repeat、round 和 space 之间的差异更容易看出。更新以下演示中每个示例的大小以比较不同的行为。

round 值在您需要在每次重复时显示完整背景图像而无需裁剪或更改它时非常有用。以下演示使用背景图像在元素周围形成边框，使用 background-repreat: round 防止边框像使用默认 repeat 行为那样裁剪图像。

尝试调整框的大小以查看 round 如何强制显示完整图像，无论框的大小如何。

或者，也许您正在想汉堡包，并决定使用 round 重复来创建一堆全尺寸的肉饼。垂直调整以下演示的大小以制作更大的汉堡包。

这是一个使用汉堡包演示 background-repeat: round; 的另一个有趣的演示。

浏览器支持

background-repeat 属性在任何地方都受支持，并且一直如此，除了 Android 的内置浏览器，它 在版本 2.1 到 4.3 之间缺乏支持。

IE	Edge	Chrome	Firefox	Safari	Opera
全部	全部	全部	全部	全部	全部

iOS	Chrome Android	Firefox Android	Android 浏览器	Opera 移动端	Android 浏览器
全部	全部	全部	全部	全部	4.4+

round 和 space 值

round 和 space 值并不总是像 repeat、no-repeat、repeat-x 和 repeat-y 一样获得所有浏览器的完全支持。但如今它们在各处都得到了可靠的支持！

多个背景

IE	Edge	Chrome	Firefox	Safari	Opera
9+	全部	全部	3.6+	全部	11.5+

iOS Safari	Chrome Android	Firefox Android	Android 浏览器	Opera Mobile
全部	全部	全部	90+	62+

相关教程

相关属性