笙亿网络策划

Tailwind CSS 怎么用 Filters 过滤效果？

约 11 分钟读完 0 阅
文章导读
Previous Quiz Next Tailwind CSS Filters 用于直接在 HTML 代码中向元素应用 CSS filters，从而无需编写自定义 CSS。Tailwind CSS filter classes 可高效用于提升元素的可见性和外观。它包含一系列
📋 目录
  1. Ⅰ Tailwind CSS 滤镜参考
  2. Ⅱ Tailwind CSS 滤镜示例
A A

Tailwind CSS - Filters

Previous
Quiz
Next

Tailwind CSS Filters 用于直接在 HTML 代码中向元素应用 CSS filters，从而无需编写自定义 CSS。Tailwind CSS filter classes 可高效用于提升元素的可见性和外观。它包含一系列 classes，如 blur、brightness、saturate、sepia、backdrop blur、backdrop sepia 等。

Tailwind CSS 滤镜参考

以下列出的主题可用于为元素应用有效的滤镜效果。

主题 描述 示例
Tailwind CSS - Blur Blur class 用于为元素应用模糊滤镜。
试一试
Tailwind CSS - Brightness Brightness class 用于为元素应用亮度滤镜。
试一试
Tailwind CSS - Contrast Contrast class 用于有效调整元素的对比度。
试一试
Tailwind CSS - Drop Shadow Drop Shadow class 用于为元素应用投影滤镜。
试一试
Tailwind CSS - Gray Scale Grayscale class 用于为元素应用灰度滤镜。
试一试
Tailwind CSS - Hue Rotate Hue Rotate class 用于为元素应用色相旋转滤镜。
试一试
Tailwind CSS - Invert Invert class 用于为元素应用反色滤镜。
试一试
Tailwind CSS - Saturate Saturate class 用于为元素应用饱和度滤镜。
试一试
Tailwind CSS - Sepia Sepia class 用于为元素应用棕褐色滤镜。
试一试
Tailwind CSS - Backdrop Blur Backdrop Blur class 用于为元素应用背景模糊滤镜。
试一试
Tailwind CSS - Backdrop Brightness Backdrop Brightness class 用于为元素应用背景亮度滤镜。
试一试
Tailwind CSS - Backdrop Contrast Backdrop Contrast class 用于为元素应用背景对比度滤镜。
试一试
Tailwind CSS - Backdrop Grayscale Backdrop Grayscale class 用于为元素应用背景灰度滤镜。
试一试
Tailwind CSS - Backdrop Hue Rotate Backdrop Hue Rotate class 用于为元素应用背景色相旋转滤镜。
试一试
Tailwind CSS - Backdrop Invert Backdrop Invert class 用于为元素应用背景反色滤镜。
试一试
Tailwind CSS - Backdrop Opacity Backdrop Opacity class 用于为元素应用背景不透明度滤镜。
试一试
Tailwind CSS - Backdrop Saturate Backdrop Saturate class 用于为元素应用背景饱和度滤镜。
试一试
Tailwind CSS - Backdrop Sepia Backdrop Sepia class 用于为元素应用背景棕褐色滤镜。
试一试

Tailwind CSS 滤镜示例

在以下示例中，我们将介绍一些前面提到的 Filters classes

示例 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>