34. 滤镜与混合模式

本节目标：掌握 Tailwind 的滤镜和混合模式工具类，能实现模糊、亮度调整、灰度等视觉效果，以及毛玻璃和文字叠加等高级设计技巧。

滤镜和混合模式是 CSS 里比较高级的东西，Tailwind 用工具类把它们包了一层，用起来没那么吓人了。

filter：滤镜

filter 是一个 CSS 简写属性，Tailwind 把它拆成了独立的工具类。

blur：模糊

blur-* 让元素本身模糊：

类名	效果
`blur-none`	无模糊
`blur-sm`	4px
`blur`	8px
`blur-md`	12px
`blur-lg`	16px
`blur-xl`	24px
`blur-2xl`	40px
`blur-3xl`	64px

<img src="photo.jpg" class="blur-sm"> <!-- 轻微模糊的图片 -->

brightness：亮度

brightness-{value} 调整元素亮度：

类名	效果
`brightness-0`	全黑
`brightness-50`	50% 亮度
`brightness-75`	75% 亮度
`brightness-100`	原始（默认）
`brightness-110`	110% 亮度
`brightness-125`	125% 亮度
`brightness-150`	150% 亮度
`brightness-200`	200% 亮度

<!-- 悬停变亮 -->
<img src="photo.jpg" class="brightness-75 hover:brightness-100 transition">

contrast：对比度

contrast-{value} 调整对比度：

类名	效果
`contrast-0`	无对比度（灰色）
`contrast-50`	50%
`contrast-75`	75%
`contrast-100`	原始
`contrast-125`	125%
`contrast-150`	150%
`contrast-200`	200%

grayscale：灰度

grayscale 让元素变成黑白：

类名	效果
`grayscale-0`	原始颜色
`grayscale`	完全灰度

<!-- 悬停变彩色 -->
<img src="photo.jpg" class="grayscale hover:grayscale-0 transition duration-300">

sepia：棕褐色

sepia 让元素呈现老照片效果：

类名	效果
`sepia-0`	原始
`sepia`	完全棕褐

saturate：饱和度

saturate-{value} 调整颜色饱和度：

类名	效果
`saturate-0`	完全去色
`saturate-50`	50% 饱和度
`saturate-100`	原始
`saturate-150`	150% 饱和度
`saturate-200`	200% 饱和度

hue-rotate：色相旋转

hue-rotate-{value} 旋转色相环：

类名	效果
`hue-rotate-0`	无旋转
`hue-rotate-15`	15deg
`hue-rotate-30`	30deg
`hue-rotate-60`	60deg
`hue-rotate-90`	90deg
`hue-rotate-180`	180deg（反色）

<img src="photo.jpg" class="hue-rotate-90"> <!-- 色相旋转 90 度 -->

invert：反色

invert 反转颜色：

类名	效果
`invert-0`	原始
`invert`	完全反色

backdrop-filter：背景滤镜

backdrop-filter 作用于元素「背后」的内容，而不是元素本身。最常用的是 backdrop-blur。

backdrop-blur：背景模糊

类名	效果
`backdrop-blur-none`	无模糊
`backdrop-blur-sm`	4px
`backdrop-blur`	8px
`backdrop-blur-md`	12px
`backdrop-blur-lg`	16px
`backdrop-blur-xl`	24px
`backdrop-blur-2xl`	40px
`backdrop-blur-3xl`	64px

<!-- 毛玻璃效果 -->
<div class="backdrop-blur-md bg-white/10 border border-white/20 rounded-xl p-6">
  毛玻璃卡片
</div>

Tip

backdrop-blur + 半透明背景 = 毛玻璃效果。这是现代 UI 设计的标配，iOS 和 macOS 都在用。

backdrop-brightness / backdrop-contrast / backdrop-grayscale

跟 brightness、contrast、grayscale 用法一样，但作用于背景：

<div class="backdrop-brightness-50">
  背后内容变暗
</div>

实际应用：毛玻璃导航栏

<header class="sticky top-0 backdrop-blur-lg bg-white/70 border-b border-gray-200/50">
  <div class="container mx-auto px-6 py-4 flex justify-between items-center">
    <div class="text-xl font-bold">Logo</div>
    <nav class="flex space-x-6">
      <a href="#" class="text-gray-700 hover:text-blue-500">首页</a>
      <a href="#" class="text-gray-700 hover:text-blue-500">关于</a>
      <a href="#" class="text-gray-700 hover:text-blue-500">联系</a>
    </nav>
  </div>
</header>

实际应用：图片悬停效果

<!-- 灰度变彩色 -->
<div class="overflow-hidden rounded-lg">
  <img 
    src="photo.jpg" 
    class="grayscale hover:grayscale-0 transition duration-500"
  >
</div>

<!-- 悬停变亮 -->
<div class="relative group overflow-hidden rounded-lg">
  <img src="photo.jpg" class="group-hover:brightness-110 transition duration-300">
  <div class="absolute inset-0 bg-black/30 group-hover:bg-black/10 transition"></div>
</div>

实际应用：暗色遮罩

<div class="relative h-64 bg-cover bg-center" style="background-image: url('hero.jpg')">
  <!-- 暗色遮罩：让文字更清晰 -->
  <div class="absolute inset-0 bg-black/50 backdrop-brightness-75"></div>
  <div class="relative z-10 flex items-center justify-center h-full">
    <h1 class="text-4xl font-bold text-white">标题文字</h1>
  </div>
</div>

mix-blend-mode：混合模式

mix-blend-* 控制元素如何与背后内容混合：

类名	效果
`mix-blend-normal`	正常
`mix-blend-multiply`	正片叠底（变暗）
`mix-blend-screen`	滤色（变亮）
`mix-blend-overlay`	叠加
`mix-blend-darken`	变暗
`mix-blend-lighten`	变亮
`mix-blend-color-dodge`	颜色减淡
`mix-blend-color-burn`	颜色加深
`mix-blend-hard-light`	强光
`mix-blend-soft-light`	柔光
`mix-blend-difference`	差值
`mix-blend-exclusion`	排除
`mix-blend-hue`	色相
`mix-blend-saturation`	饱和度
`mix-blend-color`	颜色
`mix-blend-luminosity`	明度

<!-- 文字与背景混合 -->
<div class="relative">
  <img src="texture.jpg" class="w-full">
  <div class="absolute inset-0 bg-gradient-to-r from-blue-500 to-purple-500 mix-blend-multiply"></div>
</div>

background-blend-mode：背景混合

bg-blend-* 控制元素的多个背景层之间如何混合：

类名	效果
`bg-blend-normal`	正常
`bg-blend-multiply`	正片叠底
`bg-blend-screen`	滤色
`bg-blend-overlay`	叠加
`bg-blend-darken`	变暗
`bg-blend-lighten`	变亮

<!-- 渐变和图片混合 -->
<div class="w-full h-64 bg-cover bg-center bg-blend-overlay"
     style="background-image: linear-gradient(to right, #3b82f6, #8b5cf6), url('texture.jpg')">
</div>

实际应用：文字与图片叠加

<div class="relative h-96 bg-cover bg-center" style="background-image: url('hero.jpg')">
  <div class="absolute inset-0 flex items-center justify-center">
    <h1 class="text-6xl font-black text-white mix-blend-difference">
      混合模式文字
    </h1>
  </div>
</div>

mix-blend-difference 让文字颜色与背景自动反色，无论背景是深是浅，文字都清晰可见。

性能注意

滤镜和混合模式要注意性能，特别是这几个坑：

大面积 backdrop-blur 在低端手机上会卡。我自己就遇到过导航栏毛玻璃导致页面滚动掉帧的情况。尽量缩小模糊区域。
动画滤镜（比如 hover:blur-none）会触发重绘，用 transition 时最好只过渡 filter 属性，别用 transition-all。
别嵌套多层滤镜。每一层都是渲染负担，叠加多了性能直接崩。

本节小结

blur-* → 元素模糊
brightness-* → 亮度调整
contrast-* → 对比度调整
grayscale → 灰度效果
sepia → 棕褐色
saturate-* → 饱和度
hue-rotate-* → 色相旋转
invert → 反色
backdrop-blur-* → 背景模糊（毛玻璃）
mix-blend-* → 元素混合模式
bg-blend-* → 背景混合模式
毛玻璃 = backdrop-blur + 半透明背景
大面积滤镜注意性能