背景
background-origin
用於控制元素背景相對於邊框、內距和內容如何定位的實用工具。
| 類別 | 樣式 |
|---|---|
bg-origin-border | background-origin: border-box; |
bg-origin-padding | background-origin: padding-box; |
bg-origin-content | background-origin: content-box; |
範例
基本範例
使用 bg-origin-border、bg-origin-padding 和 bg-origin-content 實用工具來控制元素背景的渲染位置
bg-origin-border
bg-origin-padding
bg-origin-content
<div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-border p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-padding p-3 ..."></div><div class="border-4 bg-[url(/img/mountains.jpg)] bg-origin-content p-3 ..."></div>響應式設計
前綴a background-origin 實用工具 與像 md: 這樣的斷點變體一起使用，僅在中 螢幕尺寸及以上套用此實用工具
<div class="bg-origin-border md:bg-origin-padding ..."> <!-- ... --></div>在變體文件中了解有關使用變體的更多資訊。
