笙亿网络策划

Tailwind CSS saturate 滤镜怎么用？如何在项目中添加饱和度效果？

约 5 分钟读完 28 阅
文章导读
Previous Quiz Next Tailwind CSS Saturate 是一个用于向元素应用 Saturate 滤镜的 utility class。
📋 目录
  1. 一 Tailwind CSS Saturate Classes
  2. 二 Tailwind CSS Saturate Classes 的功能
  3. 三 Tailwind CSS Saturate Classes 示例
A A

Tailwind CSS - Saturate

Previous
Quiz
Next

Tailwind CSS Saturate 是一个用于向元素应用 Saturate 滤镜的 utility class。

Tailwind CSS Saturate Classes

以下是用于有效应用 Saturate 滤镜的 Tailwind CSS Saturate Classes 列表。

Class CSS Properties
saturate-0 filter: saturate(0);
saturate-50 filter: saturate(.5);
saturate-100 filter: saturate(1);
saturate-150 filter: saturate(1.5);
saturate-200 filter: saturate(2);

Tailwind CSS Saturate Classes 的功能

  • saturate-*：此 class 用于向元素应用 saturate 滤镜。此处的 {*} 表示饱和度值，可根据需要设置。

Tailwind CSS Saturate Classes 示例

以下示例将展示 Tailwind CSS Saturate classes 的不同效果和实用性。

示例

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

</html>