Tailwind CSS - 对比度

Tailwind CSS 对比度是一个实用程序类，用于将对比度过滤器应用于元素。

Tailwind CSS 对比度类

以下是用于有效应用对比度过滤器的Tailwind CSS 对比度类列表。

类	CSS 属性
contrast-0	filter: contrast(0);
contrast-50	filter: contrast(.5);
contrast-75	filter: contrast(.75);
contrast-100	filter: contrast(1);
contrast-125	filter: contrast(1.25);
contrast-150	filter: contrast(1.5);
contrast-200	filter: contrast(2);

Tailwind CSS 对比度类的功能

Contrast-*： 类用于有效调整元素的对比度。此处的{*} 指定可以根据需要设置的不同对比度值。

Tailwind CSS 对比度类示例

以下示例将说明 Tailwind CSS 对比度类的不同可能性和实用程序。

示例

<!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 Contrast Classes
    </h2>
    <div class="flex gap-3 flex-wrap">
        <div>
            <h3 class="text-lg">Contrast-0</h3>
            <img class="contrast-0 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-50</h3>
            <img class="contrast-50 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-100</h3>
            <img class="contrast-100 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-125</h3>
            <img class="contrast-125 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-150</h3>
            <img class="contrast-150 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg">Contrast-200</h3>
            <img class="contrast-200 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>

</html>

打印页面