Tailwind CSS - 亮度

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

Tailwind CSS 亮度类

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

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

Tailwind CSS 亮度类的功能

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-4">
    <h2 class="text-2xl mb-3 font-bold">
        Tailwind CSS Brightness Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Brightness-0</h3>
            <img class="brightness-0 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-50</h3>
            <img class="brightness-50 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-75</h3>
            <img class="brightness-75 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Brightness-100</h3>
            <img class="brightness-100 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">brightness-125</h3>
            <img class="brightness-125 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">brightness-200</h3>
            <img class="brightness-200 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>

打印页面

上一个

下一个