Tailwind CSS - 褐色调

Tailwind CSS 褐色调是一个实用程序类，用于将褐色调滤镜应用于元素。

Tailwind CSS 褐色调类

以下是用于有效应用褐色调滤镜的Tailwind CSS 褐色调类的列表。

类	CSS 属性
sepia-0	filter: sepia(0);
sepia	filter: sepia(100%);

Tailwind CSS 褐色调类的功能

sepia-0: 此类用于从元素中移除褐色调滤镜。
sepia: 此类用于将褐色调滤镜应用于元素。

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

打印页面