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>

列印頁面