Background Clip 背景剪裁

用于控制元素背景边界框的实用工具。

Class	Properties

基本用法

设置背景剪裁

使用 bg-clip-{keyword} 实用程序来控制元素背景的边界框。

bg-clip-border

bg-clip-padding

bg-clip-content

<div class="bg-clip-border p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-padding p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>
<div class="bg-clip-content p-6 bg-violet-600 border-4 border-violet-300 border-dashed"></div>

裁剪到文本

使用 bg-clip-text 来裁剪元素的背景，使其与文本的形状相匹配。适用于您希望背景图像通过文本可见的效果。

Hello world

<div class="text-5xl font-extrabold ...">
	<span class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"> Hello world </span>
</div>

有条件地应用

悬停、焦点和其他状态

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

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

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

断点和媒体查询

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

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

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