Tailwind CSS - 亮度

Tailwind CSS：亮度滤镜

Tailwind CSS 中的 亮度（Brightness） 工具类允许你为元素应用 brightness() CSS 滤镜，使其看起来更亮或更暗。这是创建视觉效果的强大工具，尤其适用于悬停（hover）或焦点（focus）等交互状态。

亮度工具类

Tailwind 提供了一系列 brightness-{amount} 类。值为 100 表示原始亮度，低于 100 的值会使元素变暗，高于 100 的值会使元素变亮。

类名	CSS 滤镜
`brightness-0`	`filter: brightness(0);` (完全变黑)
`brightness-50`	`filter: brightness(.5);` (50% 亮度)
`brightness-75`	`filter: brightness(.75);` (75% 亮度)
`brightness-90`	`filter: brightness(.9);` (90% 亮度)
`brightness-100`	`filter: brightness(1);` (正常亮度)
`brightness-110`	`filter: brightness(1.1);` (110% 亮度)
`brightness-125`	`filter: brightness(1.25);` (125% 亮度)
`brightness-150`	`filter: brightness(1.5);` (150% 亮度)
`brightness-200`	`filter: brightness(2);` (200% 亮度)

悬停时的交互式亮度

亮度滤镜的一个常见且有效的用途是创建交互式反馈。在此示例中，我们有一个图像画廊。默认情况下，它们略微去饱和并变暗。当你将鼠标悬停在图像上时，它会过渡到全彩和完全亮度，吸引用户的注意力。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式亮度滤镜</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <h2 class="text-3xl font-bold text-center mb-8">悬停变亮</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">

        <!-- 卡片 1 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=1" alt="随机风景"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

        <!-- 卡片 2 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=2" alt="随机建筑"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

        <!-- 卡片 3 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=3" alt="随机自然风光"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

        <!-- 卡片 4 -->
        <div class="group overflow-hidden rounded-lg shadow-lg">
            <img src="https://picsum.photos/600/400?random=4" alt="随机科技"
                 class="w-full h-full object-cover transition-all duration-300
                        brightness-90 saturate-50 group-hover:brightness-100 group-hover:saturate-100" />
        </div>

    </div>
    <p class="text-center mt-6 text-gray-600">这些图像默认使用 `brightness-90` 和 `saturate-50`，并在悬停时过渡到 `brightness-100` 和 `saturate-100`。</p>
</body>
</html>

最佳实践

与过渡效果结合使用：始终添加过渡工具类（例如 transition-all duration-300），使亮度的变化平滑而非突兀。
与其他滤镜结合使用：亮度滤镜与 saturate、contrast 和 grayscale 等其他滤镜结合使用时效果极佳，可以创建更复杂的视觉效果。
使用 group-hover：对于图像嵌套在容器内的复杂卡片，使用 group 和 group-hover 工具类在父容器悬停时应用滤镜变化。
可访问性注意事项：对极端的亮度值要谨慎，因为它们会降低对比度，使文本或 UI 元素难以阅读。brightness-0 会使元素内部的一切变为黑色。