Tailwind CSS - 背景飽和度

Tailwind CSS 背景飽和度是一個實用程式類，用於將背景飽和度濾鏡應用於元素。

Tailwind CSS 背景飽和度類

以下是用於有效應用背景飽和度濾鏡的Tailwind CSS 背景飽和度類列表。

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

Tailwind CSS 背景飽和度類的功能

backdrop-saturate-*：此類用於將背景飽和度濾鏡應用於元素。*代表飽和度值，可以根據需要進行調整。

Tailwind CSS 背景飽和度類示例

以下示例說明了 Tailwind CSS 背景飽和度類的不同可見性和實用程式。

示例

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

<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Backdrop Saturate Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-saturate-50 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-100 font-bold py-12 text-center">
                Backdrop-saturate-50
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-saturate-100 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-100 font-bold py-12 text-center">
                Backdrop-saturate-100
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-saturate-150 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-100 font-bold py-12 text-center">
                Backdrop-saturate-150
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-saturate-200 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-100 font-bold py-12 text-center">
                Backdrop-saturate-200
            </div>
        </div>
    </div>
</body>

</html>

列印頁面