Tailwind CSS - 飽和度

Tailwind CSS Saturate 是一個實用程式類，用於將飽和度過濾器應用於元素。

Tailwind CSS Saturate 類

以下是用於有效應用飽和度過濾器的 Tailwind CSS Saturate 類列表。

類	CSS 屬性
saturate-0	filter: saturate(0);
saturate-50	filter: saturate(.5);
saturate-100	filter: saturate(1);
saturate-150	filter: saturate(1.5);
saturate-200	filter: saturate(2);

Tailwind CSS Saturate 類的功能

saturate-*：此類用於將飽和度過濾器應用於元素。{*}此處表示可以根據需要設定的飽和度值。

Tailwind CSS Saturate 類示例

以下示例將說明 Tailwind CSS Saturate 類的不同可見性和實用程式。

示例

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Saturate Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">saturate-0</h3>
            <img class="saturate-0 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-50</h3>
            <img class="saturate-50 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-100</h3>
            <img class="saturate-100 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-150</h3>
            <img class="saturate-150 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">saturate-200</h3>
            <img class="saturate-200 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>

列印頁面