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;

示例

基本示例

使用 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>

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

版权所有 © 2025 Tailwind Labs Inc.·商标政策