Tailwind CSS - 灰度



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

Tailwind CSS 灰度类

以下是用于有效应用灰度滤镜的Tailwind CSS 灰度类的列表。

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

Tailwind CSS 灰度类的功能

  • grayscale-0: 此类用于从元素中移除灰度滤镜。
  • grayscale: 此类用于将灰度滤镜应用于元素。

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 Grayscale Classes </h2> <div class="flex gap-6 flex-wrap"> <div> <h3 class="text-lg font-medium">grayscale-0</h3> <img class="grayscale-0 object-fit" src= "/javascript/images/javascript.jpg" alt="Image"> </div> <div> <h3 class="text-lg font-medium">grayscale</h3> <img class="grayscale object-fit" src= "/javascript/images/javascript.jpg" alt="Image"> </div> </div> </body> </html>
广告