Tailwind CSS - 背景原點

Tailwind CSS 背景原點是一個實用程式，用於指定背景屬性在元素內的來源。

Tailwind CSS 背景原點類

以下是用於設定背景原點的Tailwind CSS 背景原點類的列表。

類	CSS 屬性
bg-origin-border	background-origin: border-box;
bg-origin-padding	background-origin: padding-box;
bg-origin-content	background-origin: content-box;

Tailwind CSS 背景原點類的功能

bg-origin-border: 此類用於從邊框框（包括邊框和內填充）設定背景影像或顏色的原點。
bg-origin-padding: 此類用於從內填充框（不包括邊框）設定背景影像或顏色的原點。
bg-origin-content: 此類用於從內容框（不包括邊框和內填充）設定背景影像或顏色的原點。

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 Origin 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 p-4 text-white" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')">
            Background-origin-border
        </div>
        <div class="w-32 h-32 border-4 border-green-300 border-dashed
                    bg-clip-padding p-4 text-white"
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')">
            Background-origin-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"
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')">
            Background-origin-content
        </div>
    </div>
</body>

</html>

列印頁面