背景
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>
请参阅 变体文档 详细了解如何使用变体。