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>

列印頁面