背景裁剪background-clip

Controlling how clip the background.

Overview

Examples

Clip a background to a box

Use bg-clip-border, bg-clip-padding, or bg-clip-content to control where the background is painted.

<section class="bg-clip-padding b:8px|solid|black/.1">    ...</section>

@layer utilities {    .bg-clip-padding {        background-clip: padding-box    }}

Clip a background to text

Use bg-clip-text with a transparent text fill when a gradient or image should show through the glyphs.

<h1 class="bg:linear-gradient(90deg,red,blue) bg-clip-text text-fill-color:transparent">    Gradient text</h1>

Use this for display text, not body copy, because it can reduce contrast and selection readability.

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<div class="bg-clip-border bg-clip-padding@sm bg-clip-border@print">...</div>

Use background-origin when the issue is positioning rather than painting.