Tailwind CSS - 饱和度



Tailwind CSS Saturate 是一个实用程序类,用于将饱和度过滤器应用于元素。

Tailwind CSS Saturate 类

以下是用于有效应用饱和度过滤器的 Tailwind CSS Saturate 类列表。

CSS 属性
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 类的功能

  • saturate-*:此类用于将饱和度过滤器应用于元素。{*}此处表示可以根据需要设置的饱和度值。

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 Saturate 类示例

以下示例将说明 Tailwind CSS Saturate 类的不同可见性和实用程序。

示例

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