background-repeat

用于控制元素背景图像重复的实用工具。

类名样式

bg-repeat

background-repeat: repeat;

bg-repeat-x

background-repeat: repeat-x;

bg-repeat-y

background-repeat: repeat-y;

bg-repeat-space

background-repeat: space;

bg-repeat-round

background-repeat: round;

bg-no-repeat

background-repeat: no-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>

前缀a background-repeat 实用工具使用断点变体（如 md:）仅在以下情况下应用实用工具中等屏幕尺寸及以上

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

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