Tailwind CSS - 背景饱和度

Tailwind CSS - 背景饱和度（backdrop-saturate）

backdrop-saturate 工具类应用一个 CSS 背景滤镜，用于调整元素后面区域的饱和度。它允许对底层内容创建鲜艳或去饱和的效果。

可用类名

Tailwind 提供了一系列预配置的背景饱和度类，从 0（灰度）到 200（饱和度翻倍）。

类名	CSS 属性
backdrop-saturate-0	—tw-backdrop-saturate: saturate(0);
backdrop-saturate-50	—tw-backdrop-saturate: saturate(.5);
backdrop-saturate-100	—tw-backdrop-saturate: saturate(1);
backdrop-saturate-150	—tw-backdrop-saturate: saturate(1.5);
backdrop-saturate-200	—tw-backdrop-saturate: saturate(2);

实用示例：突出显示焦点卡片

背景滤镜非常适合创建焦点效果。在此示例中，我们将构建一个卡片，在鼠标悬停（hover）时应用多个背景滤镜，包括增加背景图像的饱和度以吸引用户的注意力。

注意：要使背景滤镜可见，元素的背景必须是半透明的。

<div class="relative w-full h-96 bg-cover bg-center" style="background-image: url('/path/to/your/nature-image.jpg')">
  <div class="absolute inset-0 flex items-center justify-center p-4">
    <!-- Interactive Card -->
    <div class="w-80 h-48 rounded-2xl border border-white/20
                bg-black/10 text-white
                flex flex-col items-center justify-center text-center p-4
                transition-all duration-300 ease-in-out
                hover:bg-black/20 hover:backdrop-blur-sm hover:backdrop-saturate-150">
      <h3 class="text-2xl font-bold">Hover Me</h3>
      <p class="opacity-80">See the background come to life.</p>
    </div>
  </div>
</div>

组合滤镜与任意值

Tailwind 滤镜的真正强大之处在于它们的链式组合。你还可以使用任意值（arbitrary values）进行精细控制。

<div class="... backdrop-blur-md backdrop-saturate-150 backdrop-brightness-125">
  Chained filters for a custom effect.
</div>

<div class="... backdrop-saturate-[.85]">
  An arbitrary saturation value.
</div>

浏览器支持与性能

背景滤镜现在已在现代浏览器中得到广泛支持，但最佳实践是始终检查 caniuse.com 以获取最新的兼容性数据。请注意，复杂的滤镜可能会消耗大量性能，应慎重使用。