Tailwind CSS - 濾鏡

上一頁
下一頁

Tailwind CSS **濾鏡** 用於直接在 HTML 程式碼上應用 CSS 濾鏡，無需自定義 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 - 背景模糊 背景模糊類用於為元素應用背景模糊濾鏡。
Tailwind CSS - 背景亮度 背景亮度類用於為元素應用背景亮度濾鏡。
Tailwind CSS - 背景對比度 背景對比度類用於為元素應用背景對比度濾鏡。
Tailwind CSS - 背景灰度 背景灰度類用於為元素應用背景灰度濾鏡。
Tailwind CSS - 背景色相旋轉 背景色相旋轉類用於為元素應用背景色相旋轉濾鏡。
Tailwind CSS - 背景反色 背景反色類用於為元素應用背景反色濾鏡。
Tailwind CSS - 背景不透明度 背景不透明度類用於為元素應用背景不透明度濾鏡。
Tailwind CSS - 背景飽和度 Backdrop Saturate 類用於為元素應用 Backdrop Saturate 濾鏡。
Tailwind CSS - 背景棕褐色 Backdrop Sepia 類用於為元素應用 Backdrop Sepia 濾鏡。

Tailwind CSS 濾鏡示例

在以下示例中，我們將介紹一些上述提到的濾鏡類。

示例 1

<!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 Filters Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Blur-sm</h3>
            <img class="blur-sm w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-200</h3>
            <img class="brightness-200 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-150</h3>
            <img class="contrast-150 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Grayscale</h3>
            <img class="grayscale w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Hue-rotate-30</h3>
            <img class="hue-rotate-30 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Invert</h3>
            <img class="invert 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">Sepia</h3>
            <img class="sepia w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>
</html>

示例 2

<!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 Filters Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-fit w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-blur-sm absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-sm
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-brightness-0 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-brightness-0
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-contrast-50 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-contrast-50
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-grayscale absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-grayscale
            </div>
        </div>
    </div>
</body>
</html>
列印頁面
上一頁
下一頁
廣告