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>

列印頁面