如何使用 CSS 垂直和水平重复背景图像？

在开发网页时，我们常常需要在页面中添加背景图像，而有些情况下，我们需要对背景图像进行重复以实现我们想要的视觉效果，本文将介绍如何使用 CSS 实现垂直和水平重复背景图像。

垂直重复背景图像

为了实现垂直重复背景图像，我们需要设置 background-repeat 属性为 repeat-y，同时将 background-size 属性设置为 auto：

div {
  background-image: url('background.png');
  background-repeat: repeat-y;
  background-size: auto;
}

在上面的代码片段中，div 元素的背景图像将在垂直方向上重复，而 background-size 属性的值为 auto，表示保持背景图像原始的大小。

水平重复背景图像

与垂直重复背景图像类似，要实现水平重复背景图像，我们需要将 background-repeat 属性设置为 repeat-x，同时将 background-size 属性设置为 auto：

div {
  background-image: url('background.png');
  background-repeat: repeat-x;
  background-size: auto;
}

上面的代码片段中，div 元素的背景图像将在水平方向上重复，而 background-size 属性的值为 auto，表示保持背景图像原始的大小。

垂直和水平同时重复背景图像

有时候，我们需要同时在垂直和水平方向上重复背景图像，这时候，我们可以将 background-repeat 属性设置为 repeat，这样就可以同时实现垂直和水平方向上的重复：

div {
  background-image: url('background.png');
  background-repeat: repeat;
  background-size: auto;
}

在上面的代码片段中，div 元素的背景图像将在垂直和水平方向上同时重复，而 background-size 属性的值为 auto，表示保持背景图像原始的大小。

总结：

| 属性 | 描述 | | :---: | :----------------------------------------------------------- | | url | 规定要使用的背景图像的 URL。 | | repeat | 规定背景图像将重复。 | | repeat-x | 规定背景图像将在 x 轴方向重复。 | | repeat-y | 规定背景图像将在 y 轴方向重复。 | | no-repeat | 规定背景图像将仅显示一次。 | | background-size: auto | 默认值。背景图像的原始大小。 |

在开发网页时，以上三种情况使用最多，当然，css还有其它的方式，在使用时，要根据实际情况灵活使用。