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: 此类用于将反转滤镜应用于元素。

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 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>

打印页面