Tailwind CSS 核心语法篇 五：过滤器

5. 过滤器 (Filters)

过滤器（Filters）是直接在浏览器中对元素进行实时视觉处理的强大工具，常用于图像处理和创建富有沉浸感的 UI 效果。Tailwind 将过滤器分为两种：标准 filter，用于改变元素本身的外观；以及 backdrop-filter，用于改变元素 背后区域 的外观，是实现“玻璃态”效果的关键。

5.1 标准过滤器 (Filter)

标准过滤器会影响应用它的元素及其所有内容。你可以像叠加图层一样组合使用多个过滤器，例如同时让一个图片变模糊并转为灰度。

5.1.1 模糊与图像调整 (Blur & Image Adjustment)

这是最常用的一组过滤器，用于调整图像的清晰度、明暗和色彩。它们经常与交互状态（如 hover）结合，创造出动态的视觉反馈。

常用类名类别说明
blur-md模糊应用中等程度的模糊，常用于背景或非活动状态
brightness-110亮度轻微提升亮度，让图片更生动
contrast-125对比度增加对比度，让图像细节更清晰
grayscale灰度常用。将图片变为完全的黑白，常用于表示“禁用”或在悬停时恢复色彩
saturate-150饱和度提升色彩饱和度，让颜色更鲜艳
sepia棕褐色应用复古的棕褐色调，营造怀旧感

代码范例：交互式的图像滤镜效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Filter Effects</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
      <!-- 默认模糊，悬停时清晰 -->
      <img src="https://picsum.photos/id/237/200/200" alt="Dog" class="rounded-lg blur-sm hover:blur-none transition duration-300 cursor-pointer">
      <!-- 默认灰度，悬停时恢复色彩 -->
      <img src="https://picsum.photos/id/1025/200/200" alt="Dog" class="rounded-lg grayscale hover:grayscale-0 transition duration-300 cursor-pointer">
      <!-- 默认低亮度，悬停时变亮 -->
      <img src="https://picsum.photos/id/10/200/200" alt="Forest" class="rounded-lg brightness-75 hover:brightness-100 transition duration-300 cursor-pointer">
      <!-- 默认复古色，悬停时恢复正常 -->
      <img src="https://picsum.photos/id/433/200/200" alt="Car" class="rounded-lg sepia hover:sepia-0 transition duration-300 cursor-pointer">
    </div>
  </body>
</html>

5.1.2 投影 (Drop Shadow)

drop-shadow 过滤器与 box-shadow 效果类似，但有一个关键区别：drop-shadow 会根据元素内容的实际轮廓（包括透明部分）来生成阴影。这使得它非常适合为不规则形状的 PNG 图片或 SVG 图标添加阴影。

类名说明
drop-shadow-md应用中等大小的投影
drop-shadow-lg应用大型投影
drop-shadow-xl应用特大型投影

代码范例：为 SVG 添加轮廓阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Drop Shadow</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div
      class="grid grid-cols-3 items-end gap-8 bg-white p-8 max-sm:grid-cols-1"
    >
      <div class="flex flex-col items-center">
        <p class="mb-3 text-center font-mono text-xs font-medium text-gray-500">
          drop-shadow-xl
        </p>
        <svg
          class="size-28 text-gray-950/100 drop-shadow-xl"
          viewBox="0 0 84 84"
        >
          <path
            d="M22.0992 77L2.19922 42.5L22.0992 8H61.8992L81.7992 42.5L61.8992 77H22.0992Z"
            class="fill-white"
          ></path>
        </svg>
      </div>
    </div>
  </body>
</html>

5.2 背景过滤器 (Backdrop Filter)

背景过滤器是创建现代 UI（如“玻璃态”）的核心技术。它 不会影响元素本身，而是对元素背后可见的区域应用效果。要使背景过滤器生效，元素本身必须是半透明的。

5.2.1 创建玻璃态效果 (Glassmorphism)

实现“玻璃态”效果的经典配方非常简单：

  1. 半透明背景: 使用 bg-{color}/{opacity}，例如 bg-white/30。
  2. 背景模糊: 使用 backdrop-blur-{size}，例如 backdrop-blur-lg。
常用类名说明
backdrop-blur-sm对背景应用轻微模糊
backdrop-blur-lg对背景应用较强的模糊
backdrop-saturate-150提升背景的饱和度，让颜色透过玻璃更鲜艳
backdrop-brightness-125提升背景的亮度

代码范例：一个典型的玻璃态卡片

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Backdrop Filter (Glassmorphism)</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <!-- 容器，包含背景图片 -->
    <div class="relative h-screen w-full flex items-center justify-center bg-cover bg-center" style="background-image: url('https://picsum.photos/id/1018/1200/800')">
      
      <!-- 玻璃态卡片 -->
      <div class="w-full max-w-sm p-8
                  bg-white/20 backdrop-blur-lg 
                  rounded-2xl border border-white/30 shadow-xl">
        <h2 class="text-2xl font-bold text-white text-shadow-sm">Glassmorphism Card</h2>
        <p class="mt-2 text-white/80">
          This card uses a semi-transparent background and a backdrop-blur filter to create a frosted glass effect.
        </p>
      </div>

    </div>
  </body>
</html>