Style backgroundRepeat 属性

什么是 backgroundRepeat 属性

backgroundRepeat 属性用于设置背景图片在元素背景中的重复方式。默认情况下，背景图片会在水平和垂直方向上重复铺满整个元素背景。但通过设置 backgroundRepeat 属性，我们可以控制背景图片的重复方式，包括水平方向重复、垂直方向重复、不重复以及指定重复间距等。

语法

backgroundRepeat 属性的语法如下：

background-repeat: repeat-x | repeat-y | no-repeat | repeat | space | round;

• repeat-x：背景图片在水平方向上重复铺满元素背景。
• repeat-y：背景图片在垂直方向上重复铺满元素背景。
• no-repeat：背景图片不重复，只显示一次。
• repeat：背景图片在水平和垂直方向上重复铺满元素背景。
• space：背景图片在水平和垂直方向上重复铺满元素背景，但是在重复的间距上留空。
• round：背景图片在水平和垂直方向上重复铺满元素背景，如果无法整数倍重复，则会拉伸图片以适应。

示例代码

下面是一些示例代码，演示了如何使用 backgroundRepeat 属性：

// www.javascriptcn.com code example
/* 水平方向重复 */
.element {
  background-image: url('example.jpg');
  background-repeat: repeat-x;
}

/* 垂直方向重复 */
.element {
  background-image: url('example.jpg');
  background-repeat: repeat-y;
}

/* 不重复 */
.element {
  background-image: url('example.jpg');
  background-repeat: no-repeat;
}

/* 水平和垂直方向重复 */
.element {
  background-image: url('example.jpg');
  background-repeat: repeat;
}

/* 重复间距留空 */
.element {
  background-image: url('example.jpg');
  background-repeat: space;
}

/* 拉伸以适应 */
.element {
  background-image: url('example.jpg');
  background-repeat: round;
}

通过上述示例代码，你可以根据需要选择不同的 backgroundRepeat 属性值，实现不同的背景图片重复效果。希望本文能够帮助你更好地理解和应用 backgroundRepeat 属性。