背景
用于控制元素背景图像重复的实用工具。
类 | 样式 |
---|---|
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>
在变体文档中了解有关使用变体的更多信息。