背景
background-origin
Utilities for controlling how an element's background is positioned relative to borders, padding, and content.
| 类 | 样式 |
|---|---|
bg-origin-border | background-origin: border-box; |
bg-origin-padding | background-origin: padding-box; |
bg-origin-content | background-origin: content-box; |
示例(Examples)
¥Examples
基本示例(Basic example)
¥Basic example
使用 bg-origin-border、bg-origin-padding 和 bg-origin-content 工具控制元素背景的渲染位置：
¥Use the bg-origin-border, bg-origin-padding, and bg-origin-content utilities to control where an element's background is rendered:
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>响应式设计(Responsive design)
¥Responsive design
在 background-origin 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<div class="bg-origin-border md:bg-origin-padding ..."> <!-- ... --></div>请参阅 变体文档 详细了解如何使用变体。