Background Repeat 背景重复

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

Class	Properties

基本用法

重复

使用 bg-repeat 来使背景图片在垂直和水平方向上重复。

<div class="bg-repeat ..." style="background-image: url(...)"></div>

不重复

当您不希望背景图片重复时，请使用 bg-no-repeat 。

<div class="bg-no-repeat bg-center ..." style="background-image: url(...)"></div>

横向重复

仅横向使用 bg-repeat-x 重复背景图像。

<div class="bg-repeat-x bg-center ..." style="background-image: url(...)"></div>

纵向重复

使用 bg-repeat-y 来使背景图片垂直方向重复。

<div class="bg-repeat-y bg-center ..." style="background-image: url(...)"></div>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:bg-repeat-x 只在悬停时应用 bg-repeat-x 实用程序。

<p class="bg-repeat hover:bg-repeat-x">
	<!-- ... -->
</p>

有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:bg-repeat-x 仅在中等屏幕尺寸及以上应用 bg-repeat-x 实用程序。

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

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。