CSS background-repeat 属性

在 CSS 中，background-repeat 属性用于指定背景图像的重复方式。背景图像可以是一张图片或者一种渐变效果。

可选值

background-repeat 属性有以下几种可选值：

• repeat：默认值，背景图像在水平和垂直方向上重复。
• repeat-x：背景图像在水平方向上重复，垂直方向上不重复。
• repeat-y：背景图像在垂直方向上重复，水平方向上不重复。
• no-repeat：背景图像不重复，只显示一次。

示例代码

// www.javascriptcn.com code example
div {
  background-image: url('background.jpg');
  background-repeat: repeat;
}

div.repeat-x {
  background-repeat: repeat-x;
}

div.repeat-y {
  background-repeat: repeat-y;
}

div.no-repeat {
  background-repeat: no-repeat;
}

在上面的示例代码中，我们定义了一个 div 元素，并设置了背景图像为 background.jpg，然后分别使用不同的 background-repeat 值进行展示。

注意事项

• 当背景图像的大小小于元素的大小时，可以通过设置不同的 background-repeat 值来控制背景图像的重复方式，以达到最佳显示效果。
• 使用 background-repeat 属性时，需要考虑背景图像的大小和元素的大小，避免出现重复过多或者不足的情况。

以上就是关于 CSS 属性 background-repeat 的详细介绍，希望能帮助你更好地掌握背景图像的重复方式。