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 工具类在垂直和水平方向重复背景图片：

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

水平重复

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

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

垂直重复

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

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

防止裁剪

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

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

防止裁剪和间隙

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

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

禁用重复

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

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

响应式设计

使用 md: 等断点变体作为 background-repeat 工具类的前缀，即可只在中等屏幕尺寸及以上应用该工具类：

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

更多关于变体的用法，请参阅变体文档。