Tailwind CSS - 褐色

Tailwind CSS - 褐色滤镜

Tailwind CSS 提供了工具类来对元素应用褐色滤镜（sepia filter），赋予其一种温暖、带褐色的单色调，让人联想到早期摄影作品。这是一组更大型滤镜工具类的一部分，其中还包括 grayscale（灰度）、blur（模糊）和 brightness（亮度）。

应用褐色滤镜

使用 sepia 和 sepia-0 工具类来应用或移除褐色效果。

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

条件应用与任意值

• 条件应用： 添加像 hover、focus 或 dark 这样的前缀，以在不同状态下应用滤镜。例如，hover:sepia 只会在用户光标悬停在元素上时应用滤镜。
• 任意值： 对于自定义的褐色量，可以使用方括号表示法。例如，sepia-[.65] 会应用 65% 的褐色滤镜。

实际示例：交互式照片画廊

此示例演示了一个交互式图片卡片，它最初带有褐色滤镜，并在悬停时过渡到全彩。这创造了一种现代、引人入胜的用户体验。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Sepia Filter</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 flex items-center justify-center h-screen">

  <div class="p-8">
    <h1 class="text-3xl font-bold text-slate-800 mb-6 text-center">交互式照片卡片</h1>
    <div class="relative w-72 h-96 rounded-lg overflow-hidden shadow-xl group">
      <img
        src="https://placehold.co/600x800/a8a29e/44403c"
        alt="一张风景的占位图。"
        class="w-full h-full object-cover sepia group-hover:sepia-0 transition-all duration-500 ease-in-out"
      />
      <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-t from-black/60 to-transparent w-full">
        <h3 class="text-white font-bold text-xl">复古风景</h3>
        <p class="text-slate-300 text-sm">悬停查看全彩</p>
      </div>
    </div>
  </div>

</body>
</html>

可访问性与最佳实践

虽然滤镜在视觉上很吸引人，但它们会改变颜色并可能降低对比度。请周全地使用它们，以确保你的内容保持可读性，并对所有用户（特别是那些有色觉缺陷的用户）可访问。褐色滤镜通常最适合装饰性图片，而不是信息性内容。