Tailwind CSS - 滤镜
Tailwind CSS 滤镜 用于直接在 HTML 代码中将 CSS 滤镜应用于元素，无需自定义 CSS。Tailwind CSS 滤镜类可有效增强元素的可见性和外观。它包含一系列类，例如模糊、亮度、饱和度、棕褐色、背景模糊、背景棕褐色等等。
Tailwind CSS 滤镜参考
以下主题可用于对元素应用有效的滤镜。
| 主题 | 描述 | 示例 |
|---|---|---|
| Tailwind CSS - Blur | Blur 类用于对元素应用模糊滤镜元素。 | |
| Tailwind CSS - 亮度 | Brightness 类用于将亮度滤镜应用于元素。 | |
| Tailwind CSS - 对比度 | Contrast 类用于有效地调整元素的对比度。 | |
| Tailwind CSS - 阴影 | 阴影类用于将阴影滤镜应用于元素。 | |
| Tailwind CSS - 灰度 | 灰度类用于将灰度滤镜应用于元素。 | |
| Tailwind CSS - 色相旋转 | 色相旋转类用于将色相旋转滤镜应用于元素。 | |
| Tailwind CSS - Invert | Invert 类用于将"Invert"滤镜应用于元素。 | |
| Tailwind CSS - Saturate | Saturate 类用于将"Saturate"滤镜应用于元素。 | |
| Tailwind CSS - Sepia | Sepia 类用于将 Sepia 滤镜应用于元素。 | |
| Tailwind CSS - 背景模糊 | Backdrop Blur 类用于将背景模糊滤镜应用于元素。 | |
| Tailwind CSS - 背景亮度 | Backdrop Brightness 类用于将背景亮度滤镜应用于元素。 | |
| Tailwind CSS - 背景对比度 | "背景对比度"类用于将背景对比度滤镜应用于元素。 | |
| Tailwind CSS - 背景灰度 | "背景灰度"类用于将背景灰度滤镜应用于元素。 | |
| Tailwind CSS - 背景色旋转 | "背景色旋转"类用于将"背景色旋转"滤镜应用于元素。 | |
| Tailwind CSS - 背景反转 | Backdrop Invert 类 ID 用于将背景反转滤镜应用于元素。 | |
| Tailwind CSS - 背景不透明度 | Backdrop Opacity 类用于将背景不透明度滤镜应用于元素。 | |
| Tailwind CSS - 背景饱和度 | Backdrop Saturate 类用于将背景饱和度滤镜应用于元素。 | |
| Tailwind CSS - 背景棕褐色 | 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>
