1. 背景
  2. background-repeat

背景

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;

示例(Examples)

¥Examples

基本示例(Basic example)

¥Basic example

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

¥Use the bg-repeat utility to repeat the background image both vertically and horizontally:

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

水平重复(Repeating horizontally)

¥Repeating horizontally

使用 bg-repeat-x 工具仅在水平方向重复背景图片:

¥Use the bg-repeat-x utility to only repeat the background image horizontally:

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

垂直重复(Repeating vertically)

¥Repeating vertically

使用 bg-repeat-y 工具仅在垂直方向重复背景图片:

¥Use the bg-repeat-y utility to only repeat the background image vertically:

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

防止剪切(Preventing clipping)

¥Preventing clipping

使用 bg-repeat-space 工具重复背景图片而不进行剪辑:

¥Use the bg-repeat-space utility to repeat the background image without clipping:

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

防止剪切和间隙(Preventing clipping and gaps)

¥Preventing clipping and gaps

使用 bg-repeat-round 工具重复背景图片而不进行剪辑,如果需要则进行拉伸以避免间隙:

¥Use the bg-repeat-round utility to repeat the background image without clipping, stretching if needed to avoid gaps:

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

禁用重复(Disabling repeating)

¥Disabling repeating

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

¥Use the bg-no-repeat utility to prevent a background image from repeating:

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

响应式设计(Responsive design)

¥Responsive design

background-repeat 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具:

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

请参阅 变体文档 详细了解如何使用变体。

TailwindCSS v4.0 中文网 - 粤ICP备13048890号