Tailwind CSS - 背景模糊

使用 Backdrop Blur 创建磨砂玻璃效果

Tailwind CSS 中的 backdrop-blur 功能类会给元素应用一个 backdrop-filter（背景滤镜），使其后面的任何可见内容变得模糊。这非常适合为导航栏、模态框和侧边栏等覆盖其他内容的 UI 元素创建现代的“磨砂玻璃”效果。

Backdrop Blur 功能类

Tailwind 提供了一系列 backdrop-blur 类，从轻微到强烈，让您可以微调效果的强度。您也可以使用任意值进行精确控制。

类名	CSS 属性
backdrop-blur-none	backdrop-filter: blur(0);
backdrop-blur-sm	backdrop-filter: blur(4px);
backdrop-blur	backdrop-filter: blur(8px);
backdrop-blur-md	backdrop-filter: blur(12px);
backdrop-blur-lg	backdrop-filter: blur(16px);
backdrop-blur-xl	backdrop-filter: blur(24px);
backdrop-blur-2xl	backdrop-filter: blur(40px);
backdrop-blur-3xl	backdrop-filter: blur(64px);
backdrop-blur-[10px]	backdrop-filter: blur(10px); （任意值）

实际示例：磨砂卡片叠加

这是一个将卡片叠加在背景图像上的真实示例。该卡片结合 backdrop-blur 和半透明背景色来创建磨砂玻璃效果。模糊处理使得卡片上的文本高度可读，同时仍然能显示背景图像。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Backdrop Blur Example</title>
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body class="antialiased text-slate-50">
  <div class="relative flex items-center justify-center min-h-screen bg-slate-900">
    <!-- Background Image -->
    <div class="absolute inset-0 w-full h-full">
      <img src="https://placehold.co/1920x1080/475569/334155" alt="Abstract background" class="w-full h-full object-cover">
    </div>

    <!-- Frosted Glass Card -->
    <div class="relative w-full max-w-sm rounded-xl bg-white/10 p-8 shadow-2xl backdrop-blur-lg ring-1 ring-white/20">
      <h2 class="text-2xl font-bold">Welcome Back</h2>
      <p class="mt-2 text-slate-300">Sign in to continue to your dashboard.</p>
      <div class="mt-6">
        <label for="email" class="block text-sm font-medium text-slate-300">Email</label>
        <input id="email" type="email" class="mt-1 block w-full rounded-md border-white/20 bg-white/5 py-2 px-3 text-white placeholder-slate-400 focus:ring-2 focus:ring-inset focus:ring-sky-400">
      </div>
      <div class="mt-4">
        <button class="w-full rounded-lg bg-sky-500 py-2.5 font-semibold hover:bg-sky-400 transition-colors">
          Sign In
        </button>
      </div>
    </div>
  </div>
</body>
</html>

调试与重要考量

• 需要透明度： backdrop-blur 仅适用于具有半透明背景色（例如 bg-white/50 或 RGBA 颜色）的元素。完全不透明的背景会完全隐藏模糊效果。
• 组合滤镜： 您可以将多个背景滤镜链式组合在一起，例如 backdrop-blur-md、backdrop-saturate-150 和 backdrop-brightness-125，以创建更复杂的效果。
• 浏览器支持： backdrop-filter 属性在现代浏览器中得到广泛支持，但并非所有浏览器都支持。请始终在 caniuse.com 上查看最新的支持数据，并考虑为旧版浏览器提供回退方案。一种常见的回退方案是简单地使用半不透明的背景色。
• 性能： 过度使用强烈的模糊效果，尤其是在大型或动画元素上，可能会对某些设备的渲染性能和电池寿命产生负面影响。请谨慎使用，并在目标设备上测试性能。