Tailwind CSS - 灰度

Tailwind CSS: grayscale 滤镜

Tailwind CSS 中的 grayscale 滤镜工具类允许您将元素转换为灰度图像。它是创建视觉效果、指示禁用状态或出于美学设计选择的强大工具。这是 Tailwind 更广泛的 filter（滤镜）工具集的一部分。

核心 grayscale 工具类

Tailwind 提供了两个主要的类用于应用或移除灰度效果。

类名	CSS 属性
grayscale	filter: grayscale(100%);
grayscale-0	filter: grayscale(0);

• grayscale：应用 100% 的完全灰度滤镜，使元素完全变为黑白。
• grayscale-0：移除任何灰度效果，将元素恢复到其原始颜色。这对于在 hover（悬停）或其他状态下反转效果特别有用。

互动示例：照片卡片

我们来看看如何使用这些类来创建一个互动效果：照片最初是灰度的，在悬停时显示其颜色。这展示了将工具类与 hover: 等状态变体结合使用的强大功能。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS Grayscale Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    /* 仅用于演示目的：一个占位图片服务 */
    .placeholder-img { content: url('https://picsum.photos/seed/tech/400/300'); }
  </style>
</head>
<body class="bg-slate-100 flex items-center justify-center min-h-screen p-4 font-sans">

  <div class="w-full max-w-sm mx-auto">
    <h1 class="text-2xl font-bold text-slate-800 text-center mb-6">Grayscale Filter Utilities</h1>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- 卡片 1：静态灰度 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden">
        <img alt="一张完全灰度的随机风景照" class="w-full h-48 object-cover grayscale placeholder-img">
        <div class="p-4">
          <h3 class="font-semibold text-slate-700">静态灰度</h3>
          <p class="text-sm text-slate-500 mt-1">使用 `grayscale`</p>
        </div>
      </div>

      <!-- 卡片 2：互动灰度 -->
      <div class="bg-white rounded-lg shadow-lg overflow-hidden">
        <img alt="一张悬停时会变为彩色的随机风景照" class="w-full h-48 object-cover grayscale hover:grayscale-0 transition-all duration-300 cursor-pointer placeholder-img">
        <div class="p-4">
          <h3 class="font-semibold text-slate-700">悬停效果</h3>
          <p class="text-sm text-slate-500 mt-1">使用 `grayscale hover:grayscale-0`</p>
        </div>
      </div>

    </div>
  </div>

</body>
</html>

最佳实践：任意值

现代 Tailwind CSS 及其 Just-in-Time (JIT) 编译器允许您使用任意值。如果 100% 的灰度效果太强，您可以直接在 HTML 中应用自定义值。这提供了极大的灵活性，而无需修改配置文件。

语法使用方括号 [] 来包含自定义值。例如：

<!-- 应用 50% 的灰度滤镜 -->
<img class="grayscale-[50%]" src="..." alt="...">

<!-- 在悬停时应用 25% 的灰度滤镜 -->
<img class="grayscale-0 hover:grayscale-[25%]" src="..." alt="...">

无障碍性考虑

虽然灰度滤镜在视觉上很有趣，但请确保它们不会影响可用性。例如，如果您使用颜色来传达信息（例如，在图表或状态指示器中），应用灰度滤镜可能会移除该上下文。请仔细使用它，以增强而非削弱用户体验。