Tailwind CSS - 背景圖片

Tailwind CSS 背景圖片是一個指定元素背景圖片的實用程式。

Tailwind CSS 背景圖片類

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

類	CSS 屬性
bg-none	background-image: none;
bg-gradient-to-t	background-image: linear-gradient(to top, var(--tw-gradient-stops));
bg-gradient-to-tr	background-image: linear-gradient(to top right, var(--tw-gradient-stops));
bg-gradient-to-r	background-image: linear-gradient(to right, var(--tw-gradient-stops));
bg-gradient-to-br	background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
bg-gradient-to-b	background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
bg-gradient-to-bl	background-image: linear-gradient(to bottom left, var(--tw-gradient-stops));
bg-gradient-to-l	background-image: linear-gradient(to left, var(--tw-gradient-stops));
bg-gradient-to-tl	background-image: linear-gradient(to top left, var(--tw-gradient-stops));

Tailwind CSS 背景圖片類的功能

bg-none: 此類用於移除背景圖片。
bg-gradient-to-t: 此類設定從下到上從一種顏色過渡到另一種顏色的漸變背景圖片。
bg-gradient-to-tr: 此類設定從左下到右上從一種顏色過渡到另一種顏色的漸變背景圖片。
bg-gradient-to-r: 此類設定從左到右從一種顏色過渡到另一種顏色的漸變背景圖片。
bg-gradient-to-br: 此類設定從左上到右下從一種顏色過渡到另一種顏色的漸變背景圖片。
bg-gradient-to-b: 此類設定從上到下從一種顏色過渡到另一種顏色的漸變背景圖片。
bg-gradient-to-bl: 此類設定從右上到左下從一種顏色過渡到另一種顏色的漸變背景圖片。
bg-gradient-to-l: 此類設定從右到左從一種顏色過渡到另一種顏色的漸變背景圖片。
bg-gradient-to-tl: 此類設定從右下到左上從一種顏色過渡到另一種顏色的漸變背景圖片。

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 Image Classes
    </h2>
    <div class="flex flex-wrap gap-3">
        <div class="bg-gradient-to-r from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-r
        </div>
        <div class="bg-gradient-to-tr from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-tr
        </div>
        <div class="bg-gradient-to-r from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-r
        </div>
        <div class="bg-gradient-to-br from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-br
        </div>
        <div class="bg-gradient-to-b from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-b
        </div>
        <div class="bg-gradient-to-bl from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-bl
        </div>
        <div class="bg-gradient-to-l from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-l
        </div>
        <div class="bg-gradient-to-tl from-green-500 to-green-100 
                    h-12 w-44 p-3">
            bg-gradient-to-tl
        </div>
    </div>
</body> 

</html>

列印頁面