背景重复

背景重复

控制元素背景图像重复的工具类。

Class Styles

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>

Prefix a background-repeat utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.