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>
打印页面
上一页
下一页
广告