Tailwind CSS - 饱和度

现代 Tailwind CSS：Saturate（饱和度）

Saturate（饱和度）工具类应用一个 CSS 滤镜，用于改变元素的颜色饱和度。它可以使颜色更鲜艳，或通过去饱和来创建灰度或柔和效果。

Saturate 相关的类

Tailwind 提供了几种预设的饱和度级别。

类名	CSS 滤镜属性
saturate-0	filter: saturate(0); (灰度)
saturate-50	filter: saturate(.5); (50% 饱和度)
saturate-100	filter: saturate(1); (正常饱和度)
saturate-150	filter: saturate(1.5); (150% 饱和度)
saturate-200	filter: saturate(2); (200% 饱和度)

示例：调整图片饱和度

此示例展示了同一张图片应用不同饱和度级别的效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Saturate 示例</title>
</head>
<body class="p-8 bg-slate-100">

  <h2 class="text-2xl font-bold mb-6 text-center">图片饱和度级别</h2>

  <div class="grid grid-cols-2 md:grid-cols-5 gap-6">

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="图片" class="saturate-0 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-0</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="图片" class="saturate-50 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-50</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="图片" class="saturate-100 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-100 (正常)</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="图片" class="saturate-150 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-150</p>
    </div>

    <div class="text-center">
      <img src="https://picsum.photos/id/433/400/400" alt="图片" class="saturate-200 rounded-lg shadow-md">
      <p class="mt-2 font-mono text-sm">saturate-200</p>
    </div>

  </div>

</body>
</html>

交互式示例：悬停效果

一种非常常见的 UI (用户界面) 模式是，图片在默认状态下为灰度，鼠标悬停时显示其色彩。这可以通过结合 saturate-0 工具类和 hover:saturate-100 状态变体轻松实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>交互式饱和度</title>
</head>
<body class="p-8 bg-gray-900 flex justify-center items-center h-screen">

  <div class="group relative overflow-hidden rounded-lg">
    <img
      src="https://picsum.photos/id/237/600/400"
      alt="一只狗"
      class="saturate-0 group-hover:saturate-100 transition-all duration-500 ease-in-out transform group-hover:scale-110"
    >
    <div class="absolute inset-0 bg-black/20"></div>
    <p class="absolute bottom-4 left-4 text-white font-bold text-xl drop-shadow-lg">
      悬停我
    </p>
  </div>

</body>
</html>

结合滤镜和任意值

你可以将 saturate 与其他滤镜工具类（如 brightness (亮度) 或 contrast (对比度)）结合使用。对于自定义值，请使用 Tailwind 的任意值语法。

<!-- 组合多个滤镜 -->
<img src="..." class="saturate-150 brightness-125 ...">

<!-- 使用任意饱和度值 -->
<img src="..." class="saturate-[.85] ...">