Tailwind CSS - 背景裁剪

Tailwind CSS 背景裁剪是一个实用程序，用于指定元素内背景的裁剪行为。

Tailwind CSS 背景裁剪类

以下是用于设置背景裁剪行为的Tailwind CSS 背景裁剪类列表。

类	CSS 属性
bg-clip-border	background-clip: border-box;
bg-clip-padding	background-clip: padding-box;
bg-clip-content	background-clip: content-box;
bg-clip-text	background-clip: text;

Tailwind CSS 背景裁剪类的功能

bg-clip-border: 此类用于将背景裁剪到边框框，在整个容器（包括边框和填充）上设置背景属性。
bg-clip-padding: 此类用于将背景裁剪到填充框，在整个容器（不包括边框）上设置背景属性。
bg-clip-content: 此类用于将背景裁剪到内容框，在内容（不包括边框和填充）上设置背景属性。
bg-clip-text: 此类用于将背景裁剪到文本，仅在文本内设置背景属性。

Tailwind CSS 背景裁剪示例

以下示例将说明背景裁剪类的不同实用程序。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Background Clip Border, Padding, and Content Classes
    </h2>
    <div class="flex gap-3">
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-border bg-green-600 p-4 text-white">
            Background-clip-border
        </div>
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-padding bg-green-600 p-4 text-white">
            Background-clip-padding
        </div>
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-content bg-green-600 p-4 text-white">
            Background-clip-content
        </div>
    </div>
</body>

</html>

示例

<!DOCTYPE html> 
<html> 
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-5 text-center">
        Tailwind CSS Background Clip Text Classes
    </h2>
    <div class="text-6xl text-center font-extrabold 
                text-transparent bg-clip-text" 
            style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')"
    >
        Tutorialspoint
    </div>
</body>

</html>

打印页面