background-repeat

控制元素背景图片重复方式的工具。

快速参考

使用 bg-repeat 工具使背景图片在垂直和水平方向上都重复：

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat ..."></div>

使用 bg-repeat-x 工具使背景图片只在水平方向上重复：

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-x ..."></div>

使用 bg-repeat-y 工具使背景图片只在垂直方向上重复：

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-y ..."></div>

使用 bg-repeat-space 工具使背景图片重复时不被裁剪：

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-space ..."></div>

使用 bg-repeat-round 工具使背景图片重复时不被裁剪，必要时进行拉伸以避免间隙：

<div class="bg-[url(/img/clouds.svg)] bg-center bg-repeat-round ..."></div>

使用 bg-no-repeat 工具防止背景图片重复：

<div class="bg-[url(/img/clouds.svg)] bg-center bg-no-repeat ..."></div>

在背景重复工具前加上像 md: 这样的断点变体，以便只在中等屏幕尺寸及以上应用该工具：

<div class="bg-repeat md:bg-repeat-x ...">
  <!-- ... -->
</div>

在变体文档中了解更多关于使用变体的信息。

background-position

用于控制元素背景图片位置的工具。

background-size

用于控制元素背景图片尺寸的工具。