Tailwind CSS - 背景亮度

Tailwind CSS 背景亮度是一个实用程序类，用于将背景亮度滤镜应用于元素。

Tailwind CSS 背景亮度类

以下是用于有效应用背景亮度滤镜的Tailwind CSS 背景亮度类的列表。

类名	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);

Tailwind CSS 背景亮度类的功能

Backdrop Brightness-*： 类用于有效调整元素的背景亮度。这里的 {*} 指定了根据需要可以设置的不同背景亮度值。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 背景亮度类示例

以下示例将说明 Tailwind CSS 背景亮度类的不同可见性和实用程序。

示例

Open Compiler

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Backdrop Brightness Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-brightness-50 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-Brightness-50
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-brightness-75 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-Brightness-75
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-brightness-125 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-Brightness-125
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-cover w-full h-full" 
                    src=
"/javascript/images/javascript.jpg" 
                    alt="Image">
            <div class="backdrop-brightness-200 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-Brightness-200
            </div>
        </div>
    </div>
</body>

</html>

打印页面