Tailwind CSS - 背景亮度

Tailwind 的背景亮度功能类会给元素后面的区域应用一个亮度滤镜。这是 CSS backdrop-filter 属性族的一部分，非常适合在用户界面中创建分层、“磨砂玻璃”效果。

背景亮度类

这些功能类允许您精确控制背景的亮度。值为 100 (backdrop-brightness-100) 表示原始亮度，小于 100 的值会使背景变暗，而大于 100 的值会使其变亮。

类名	CSS 属性
`backdrop-brightness-0`	`backdrop-filter: brightness(0);`
`backdrop-brightness-50`	`backdrop-filter: brightness(.5);`
`backdrop-brightness-75`	`backdrop-filter: brightness(.75);`
`backdrop-brightness-90`	`backdrop-filter: brightness(.9);`
`backdrop-brightness-95`	`backdrop-filter: brightness(.95);`
`backdrop-brightness-100`	`backdrop-filter: brightness(1);`
`backdrop-brightness-105`	`backdrop-filter: brightness(1.05);`
`backdrop-brightness-110`	`backdrop-filter: brightness(1.1);`
`backdrop-brightness-125`	`backdrop-filter: brightness(1.25);`
`backdrop-brightness-150`	`backdrop-filter: brightness(1.5);`
`backdrop-brightness-200`	`backdrop-filter: brightness(2);`

实际应用：磨砂玻璃 UI 卡片

使用背景滤镜的一个绝佳方式是创建叠加在动态或多彩背景之上的 UI 元素。在此示例中，我们将一张卡片放置在生动的背景图像之上。该卡片使用 backdrop-blur 和 backdrop-brightness 来创建一种现代的半透明“磨砂玻璃”外观，确保顶部文本可读，同时仍能显示背景。

注意： 要使背景滤镜生效，元素的背景必须具有一定程度的透明度（例如，bg-white/30）。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Backdrop Brightness Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

    <div class="relative min-h-screen flex items-center justify-center p-4 bg-cover bg-center"
         style="background-image: url('https://images.unsplash.com/photo-1558591710-4b4a1ae0f04d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80')">

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-8 w-full max-w-4xl">

            <!-- Card with lower brightness -->
            <div class="relative p-8 rounded-xl bg-white/30 backdrop-blur-md backdrop-brightness-75">
                <h2 class="text-2xl font-bold text-gray-900">Darkened Backdrop (75)</h2>
                <p class="mt-2 text-gray-800">
                    This card uses `backdrop-brightness-75`, making the background behind it appear darker and increasing text contrast.
                </p>
            </div>

            <!-- Card with higher brightness -->
            <div class="relative p-8 rounded-xl bg-white/30 backdrop-blur-md backdrop-brightness-125">
                <h2 class="text-2xl font-bold text-gray-900">Brightened Backdrop (125)</h2>
                <p class="mt-2 text-gray-800">
                    This card uses `backdrop-brightness-125`, which brightens the background image seen through the element.
                </p>
            </div>

        </div>
    </div>

</body>
</html>

重要考量

组合滤镜： 背景亮度通常与 backdrop-blur、backdrop-saturate 或 backdrop-contrast 等其他背景滤镜结合使用，以创建更精致的效果。您可以在同一个 class 属性中将它们链式组合。
浏览器兼容性： backdrop-filter 属性受所有现代浏览器支持，但在 Internet Explorer 中不可用。如果您需要支持旧版浏览器，请务必查看 caniuse.com。
性能： 复杂的背景滤镜可能会占用大量计算资源，并可能影响低端设备的滚动性能或电池续航时间。请谨慎使用，并在各种设备上测试性能。