Tailwind CSS - 背景

Tailwind CSS **背景** 包含一系列重要的实用程序类，这些类提供了一种简单的方法来控制背景大小、位置和有效的背景图像对齐。它包含诸如背景裁剪、背景位置、背景大小、背景图像等类，以及更多。

Tailwind CSS 背景

以下列出的主题可用于有效地在元素上应用背景。

主题	描述	示例
Tailwind CSS - 背景附件	背景附件类用于指定滚动时背景图像的行为。	试试看
Tailwind CSS - 背景裁剪	背景裁剪类用于指定元素内背景的裁剪行为。	试试看
Tailwind CSS - 背景颜色	背景颜色类用于指定元素的背景颜色。	试试看
Tailwind CSS - 背景原点	背景原点类用于指定背景属性在元素内起源的位置。	试试看
Tailwind CSS - 背景位置	背景位置类用于指定背景图像将在元素内放置的位置。	试试看
Tailwind CSS - 背景重复	背景重复类用于指定背景图像在元素内的重复行为。	试试看
Tailwind CSS - 背景大小	背景大小类用于指定背景图像的大小。	试试看
Tailwind CSS - 背景图像	背景图像类用于指定元素的背景图像。	试试看
Tailwind CSS - 渐变颜色停止	渐变颜色停止类用于指定背景渐变中的颜色停止。	试试看

Tailwind CSS 背景示例

在下面的示例中，我们将介绍上面提到的某些 Transform 类。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="px-8 py-4 bg-teal-100">
    <h2 class="text-xl font-bold mb-3 text-center">
        Tailwind CSS Background Color, Background Clip,
        Background Image, and Gradient Color Stops Example
    </h2>
    <div class="border-2 shadow-2xl rounded-xl w-full h-52
                bg-gradient-to-r from-pink-200 via-sky-200 
                to-rose-200">
        <div class="text-6xl text-center font-extrabold 
                    text-transparent bg-clip-text py-14" 
                style="background-image:url(
'https://d3mxt5v3yxgcsr.cloudfront.net/courses/8654/course_8654_image.png?v=1.0')"
        >
            Tutorialspoint
        </div>
    </div>
</body>
</html>

打印页面