Tailwind CSS - 背景模糊



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

Tailwind CSS 背景模糊类

以下是用于有效应用背景模糊滤镜的 Tailwind CSS 背景模糊 类的列表。

CSS 属性
backdrop-blur-none backdrop-filter: ;
backdrop-blur-sm backdrop-filter: blur(4px);
backdrop-blur backdrop-filter: blur(8px);
backdrop-blur-md backdrop-filter: blur(12px);
backdrop-blur-lg backdrop-filter: blur(16px);
backdrop-blur-xl backdrop-filter: blur(24px);
backdrop-blur-2xl backdrop-filter: blur(40px);
backdrop-blur-3xl backdrop-filter: blur(64px);

Tailwind CSS 背景类的功能

  • backdrop-blur-none: 此类用于从元素中删除背景模糊滤镜。
  • backdrop-blur-sm: 此类用于将小的背景模糊滤镜应用于模糊半径为 4px 的元素。
  • backdrop-blur: 此类用于将模糊半径为 8px 的背景模糊滤镜应用于元素。
  • backdrop-blur-md: 此类用于将中等背景模糊滤镜应用于模糊半径为 12px 的元素。
  • backdrop-blur-lg: 此类用于将大的背景模糊滤镜应用于模糊半径为 16px 的元素。
  • backdrop-blur-xl: 此类用于将特大的背景模糊滤镜应用于模糊半径为 24px 的元素。
  • backdrop-blur-2xl: 此类用于将双特大的背景模糊滤镜应用于模糊半径为 40px 的元素。
  • backdrop-blur-3xl: 此类用于将三特大的模糊滤镜应用于模糊半径为 64px 的元素。

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 Blur Classes </h2> <div class="flex gap-3 flex-wrap "> <div class="relative w-44 h-44"> <img class="object-fit w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-blur-sm absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-lime-100 py-12 text-center"> Backdrop-blur-sm </div> </div> <div class="relative w-44 h-44 "> <img class="object-fit w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-blur-md absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-lime-100 py-12 text-center"> Backdrop-blur-md </div> </div> <div class="relative w-44 h-44 "> <img class="object-fit w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-blur-lg absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-lime-100 py-12 text-center"> Backdrop-blur-lg </div> </div> <div class="relative w-44 h-44 "> <img class="object-fit w-full h-full" src= "/javascript/images/javascript.jpg" alt="Image"> <div class="backdrop-blur-2xl absolute w-36 h-36 border-2 border-green-500 top-4 left-4 text-lime-100 py-12 text-center"> Backdrop-blur-2xl </div> </div> </div> </body> </html>
广告