Tailwind CSS - 背景饱和度



Tailwind CSS 背景饱和度是一个实用程序类,用于将背景饱和度滤镜应用于元素。

Tailwind CSS 背景饱和度类

以下是用于有效应用背景饱和度滤镜的Tailwind CSS 背景饱和度类列表。

类名 CSS 属性
backdrop-saturate-0 filter: backdrop-saturate(0);
backdrop-saturate-50 filter: backdrop-saturate(.5);
backdrop-saturate-100 filter: backdrop-saturate(1);
backdrop-saturate-150 filter: backdrop-saturate(1.5);
backdrop-saturate-200 filter: backdrop-saturate(2);

Tailwind CSS 背景饱和度类的功能

  • backdrop-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 背景饱和度类示例

以下示例说明了 Tailwind CSS 背景饱和度类的不同可见性和实用程序。

示例

Open Compiler
<!DOCTYPE html> <html> <head> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="p-8"> <h2 class="text-2xl font-bold mb-3"> Tailwind CSS Backdrop Saturate Classes </h2> <div class="flex gap-3 flex-wrap "> <div class="relative w-44 h-44"> <img class="object-cover w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-saturate-50 absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-red-100 font-bold py-12 text-center"> Backdrop-saturate-50 </div> </div> <div class="relative w-44 h-44 "> <img class="object-cover w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-saturate-100 absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-red-100 font-bold py-12 text-center"> Backdrop-saturate-100 </div> </div> <div class="relative w-44 h-44 "> <img class="object-cover w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-saturate-150 absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-red-100 font-bold py-12 text-center"> Backdrop-saturate-150 </div> </div> <div class="relative w-44 h-44 "> <img class="object-cover w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-saturate-200 absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-red-100 font-bold py-12 text-center"> Backdrop-saturate-200 </div> </div> </div> </body> </html>
广告