Tailwind CSS - 背景灰度

Tailwind CSS - 背景灰度

backdrop-grayscale 工具类对元素 背后 的区域应用灰度滤镜。这是 Tailwind 背景滤镜套件的一部分，非常适合创建磨砂玻璃等现代 UI 效果。

背景灰度工具类

这些工具类允许你应用或移除背景灰度效果。

类名	CSS 属性
backdrop-grayscale-0	--tw-backdrop-grayscale: grayscale(0);
backdrop-grayscale	--tw-backdrop-grayscale: grayscale(1);

核心概念：背景滤镜

标准滤镜（如 grayscale）会影响元素本身。而 背景滤镜（backdrop filter）（如 backdrop-grayscale）则影响通过元素半透明部分可见的内容。这就是为什么背景滤镜总是用于具有一定透明度的元素上，通常通过背景颜色不透明度（例如 bg-white/30）来设置。

实际示例：磨砂玻璃 UI

在此示例中，我们将一张卡片放置在彩色背景图片之上。通过使卡片的背景半透明并添加 backdrop-grayscale 和 backdrop-blur，我们可以创建出时尚的“磨砂玻璃”效果，使背景内容可见但去饱和并模糊。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Backdrop Grayscale Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">

  <h2 class="text-2xl font-bold mb-4 text-center text-slate-800">背景滤镜演示</h2>

  <div class="relative w-full h-96 rounded-xl overflow-hidden">
    <!-- 背景图片 -->
    <img
      src="https://images.unsplash.com/photo-1559128010-4c1ad8e1b4a5?q=80&w=2070"
      alt="一个色彩丰富的海滩场景"
      class="object-cover w-full h-full"
    />

    <!-- 带背景滤镜的居中内容框 -->
    <div class="absolute inset-0 flex items-center justify-center p-4">
      <div class="
        w-full max-w-sm
        p-6
        rounded-xl
        border border-white/20
        bg-white/20
        text-white
        shadow-lg
        backdrop-grayscale
        backdrop-blur-md
      ">
        <h3 class="text-2xl font-bold">磨砂卡片</h3>
        <p class="mt-2 text-sm">
          此卡片使用 `bg-white/20` 实现透明效果，使用 `backdrop-grayscale` 使其背后背景去饱和，并使用 `backdrop-blur-md` 达到磨砂玻璃效果。
        </p>
      </div>
    </div>

  </div>

</body>
</html>

注意事项和最佳实践

• 组合滤镜：backdrop-grayscale 通常与其他背景滤镜（如 backdrop-blur、backdrop-brightness 或 backdrop-saturate）结合使用时效果最佳。
• 需要透明度：请记住，背景滤镜仅适用于具有透明或半透明背景的元素。
• 浏览器支持：背景滤镜在所有现代浏览器中都受支持，但在 Internet Explorer 等旧版浏览器中可能无法工作。如果需要支持旧版浏览器，请务必查看 CanIUse.com 等兼容性表格。
• 性能：过度使用复杂的背景滤镜可能会对性能产生影响，尤其是在低性能设备上。请慎重使用并测试性能。