Tailwind CSS - 反轉濾鏡 (Invert)

Tailwind CSS 反轉濾鏡 (Invert) 是一個實用程式類，用於將反轉濾鏡應用於元素。

Tailwind CSS 反轉濾鏡類

以下是用於有效應用反轉濾鏡的Tailwind CSS 反轉濾鏡類的列表。

類名	CSS 屬性
invert-0	filter: invert(0);
invert	filter: invert(100%);

Tailwind CSS 反轉濾鏡類的功能

invert-0: 此類用於從元素中移除反轉濾鏡。
invert: 此類用於將反轉濾鏡應用於元素。

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 Invert Classes
    </h2>
    <div class="flex gap-6 flex-wrap">
        <div>
            <h3 class="text-lg font-medium">invert-0</h3>
            <img class="invert-0 w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
        <div>
            <h3 class="text-lg font-medium">invert</h3>
            <img class="invert w-28 h-24 object-fit"
                    src=
"/javascript/images/javascript.jpg"
                    alt="Image">
        </div>
    </div>
</body>
</html>

列印頁面