Background Origin 背景原点

控制元素背景相对边框、填充和内容定位的实用工具。

Class	Properties

基本用法

设置背景原点

使用 bg-origin-border 、 bg-origin-padding 和 bg-origin-content 来控制元素的背景渲染位置。

bg-origin-border

bg-origin-padding

bg-origin-content

<div class="bg-origin-border p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-padding p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>
<div class="bg-origin-content p-4 border-4 border-dashed ..." style="background-image: url(...)"></div>

有条件地应用

悬停、焦点和其他状态

Tailwind 允许您使用变体修饰符在不同状态下有条件地应用实用程序类。例如，使用 hover:bg-origin-padding 只在悬停时应用 bg-origin-padding 实用程序。

<p class="bg-origin-border hover:bg-origin-padding">
	<!-- ... -->
</p>

有关所有可用状态修改器的完整列表，请查看悬停、焦点和其他状态文档。

断点和媒体查询

您还可以使用变体修饰符来针对响应式断点、深色模式、prefers-reduced-motion 等媒体查询进行定位。例如，使用 md:bg-origin-padding 仅在中等屏幕尺寸及以上应用 bg-origin-padding 实用程序。

<p class="bg-origin-border md:bg-origin-padding">
	<!-- ... -->
</p>

要了解更多信息，请查看有关响应式设计、深色模式和其他媒体查询修饰符的文档。