Tailwind CSS - 背景褐色

现代 Tailwind CSS：背景褐色滤镜（backdrop-sepia）

backdrop-sepia 工具类对元素的背景应用一个褐色滤镜（sepia filter）。这意味着它会影响元素后面可见的所有内容，使其非常适合创建分层、玻璃般的 UI 效果。要使此效果可见，元素本身必须具有一定程度的透明度。

背景褐色滤镜类名

背景褐色滤镜的类名非常直观。

类名	CSS 滤镜属性
backdrop-sepia	--tw-backdrop-sepia: sepia(100%);
backdrop-sepia-0	--tw-backdrop-sepia: sepia(0);

要查看效果，你必须将其与其他背景滤镜工具类（如 backdrop-filter）和半透明背景色（例如 bg-white/50）结合使用。

实用示例：磨砂玻璃 UI

在此示例中，我们将一张卡片放置在彩色背景图像之上。该卡片使用 backdrop-blur 创建磨砂玻璃效果，并使用 backdrop-sepia 为模糊的背景添加褐色调。

<!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 Sepia Example</title>
</head>
<body>

  <div
    class="relative h-screen w-full flex items-center justify-center p-4 bg-cover bg-center"
    style="background-image: url('https://picsum.photos/id/1015/1200/800')"
  >
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

      <!-- Card without backdrop-sepia -->
      <div class="w-72 h-48 p-4 rounded-xl border border-white/20 bg-white/20 backdrop-blur-md">
        <h3 class="font-bold text-gray-800">No Sepia Effect</h3>
        <p class="text-sm text-gray-700">This card only has a blur effect on its backdrop.</p>
      </div>

      <!-- Card with backdrop-sepia -->
      <div class="w-72 h-48 p-4 rounded-xl border border-white/20 bg-white/20 backdrop-blur-md backdrop-sepia">
        <h3 class="font-bold text-gray-800">With Sepia Effect</h3>
        <p class="text-sm text-gray-700">This card applies both a blur and a sepia filter to the image behind it.</p>
      </div>

    </div>
  </div>

</body>
</html>

条件应用

与其他工具类一样，你可以有条件地应用背景滤镜。例如，你可以仅在鼠标悬停（hover）时添加褐色滤镜效果。

<div class="backdrop-blur-md backdrop-sepia-0 hover:backdrop-sepia transition-all ...">
  Hover over me to apply the sepia effect.
</div>

最佳实践

背景滤镜可能会占用大量计算资源。请在不覆盖屏幕大面积区域或不频繁变化的元素上谨慎使用它们，以确保流畅的性能，尤其是在移动设备上。