Tailwind CSS - 背景对比度

使用 Backdrop Contrast 创建玻璃拟态效果

背景滤镜功能类允许您将模糊、亮度、对比度等图形效果应用于元素后面的区域。backdrop-contrast 类专门用于调整背景的对比度，非常适合创建现代的“磨砂玻璃”或“玻璃拟态”用户界面设计。

背景滤镜的前提条件

为了使任何 backdrop-* 功能类可见，应用它的元素必须具有一定程度的透明度。这通常通过设置半透明背景色来实现，例如 bg-white/50 或 bg-black/30。

Backdrop Contrast 功能类

这些功能类控制元素后面内容的对比度级别。值为 100 表示原始对比度。

类名	CSS 属性
backdrop-contrast-0	--tw-backdrop-contrast: contrast(0);
backdrop-contrast-50	--tw-backdrop-contrast: contrast(.5);
backdrop-contrast-75	--tw-backdrop-contrast: contrast(.75);
backdrop-contrast-100	--tw-backdrop-contrast: contrast(1);
backdrop-contrast-125	--tw-backdrop-contrast: contrast(1.25);
backdrop-contrast-150	--tw-backdrop-contrast: contrast(1.5);
backdrop-contrast-200	--tw-backdrop-contrast: contrast(2);

实际应用：磨砂标题栏

一个常见用例是叠加在动态内容上方的导航栏。通过结合 backdrop-blur 和 backdrop-contrast，您可以确保当用户滚动时，导航链接保持清晰且时尚。

<!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>Backdrop Contrast Example</title>
</head>
<body>
  <div class="relative bg-gray-200">
    <!-- 带有背景滤镜的粘性标题栏 -->
    <header class="sticky top-0 z-10 p-4
                   bg-white/70
                   backdrop-blur-lg
                   backdrop-contrast-125
                   shadow-sm">
      <h1 class="text-xl font-bold text-gray-800">My Website</h1>
    </header>

    <!-- 页面内容 -->
    <main class="relative">
      <div class="h-96 bg-cover bg-center" style="background-image: url('https://placehold.co/1200x800/ec4899/ffffff?text=Colorful+Background')"></div>
      <div class="p-8">
        <h2 class="text-3xl font-bold mb-4">Scroll Down</h2>
        <p class="text-gray-700 leading-relaxed">
          当您滚动时，请注意上面的标题栏如何变成一个“磨砂玻璃”层。
          `backdrop-blur` 柔化了其后面的图像，而 `backdrop-contrast-125` 则轻微增加了模糊背景的对比度，使标题中的文本更突出并提高了可读性。这种滤镜组合是实现现代、精致外观的关键。
        </p>
        <div class="h-screen"></div> <!-- 仅用于使页面可滚动 -->
      </div>
    </main>
  </div>
</body>
</html>

性能与浏览器支持

• 性能： backdrop-filter 可能会占用大量资源，因为浏览器需要在每一帧或每次滚动时执行复杂的计算。请谨慎使用，尤其是在大型或频繁动画的元素上。在低端设备上进行测试，以确保流畅的用户体验。
• 浏览器支持： backdrop-filter 属性受所有现代浏览器（Chrome、Firefox、Safari、Edge）支持。但是，在旧版浏览器中可能不可用。请始终在 Can I Use 等服务上查看最新的支持信息。