Backgrounds
背景重复
用于控制元素背景图像重复方式的功能类。
| 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.
