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>

在變體文件中瞭解更多關於使用變體的資訊。