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: 此类用于从内容框（不包括边框和内填充）设置背景图像或颜色的原点。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 背景原点示例

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

示例

Open Compiler

<!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>

打印页面