Tailwind CSS - Backdrop Opacity
Tailwind CSS backdrop-opacity 是一个实用类，用于将背景不透明度滤镜应用于元素。
Tailwind CSS backdrop-opacity 类
以下是用于有效应用背景不透明度滤镜的 Tailwind CSS backdrop-opacity 类列表。
| 类 | CSS 属性 |
|---|---|
| backdrop-opacity-0 | backdrop-filter: opacity(0); |
| backdrop-opacity-5 | backdrop-filter: opacity(0.05); |
| backdrop-opacity-10 | backdrop-filter: opacity(0.1); |
| backdrop-opacity-15 | backdrop-filter: opacity(0.15); |
| backdrop-opacity-20 | backdrop-filter: opacity(0.2); |
| backdrop-opacity-25 | backdrop-filter: opacity(0.25); |
| backdrop-opacity-30 | backdrop-filter: opacity(0.3); |
| backdrop-opacity-35 | backdrop-filter: opacity(0.35); |
| backdrop-opacity-40 | backdrop-filter: opacity(0.4); |
| backdrop-opacity-45 | backdrop-filter: opacity(0.45); |
| backdrop-opacity-50 | backdrop-filter: opacity(0.5); |
| backdrop-opacity-55 | backdrop-filter: opacity(0.55); |
| backdrop-opacity-60 | backdrop-filter: opacity(0.6); |
| backdrop-opacity-65 | backdrop-filter: opacity(0.65); |
| backdrop-opacity-70 | backdrop-filter: opacity(0.7); |
| backdrop-opacity-75 | backdrop-filter: opacity(0.75); |
| backdrop-opacity-80 | backdrop-filter: opacity(0.8); |
| backdrop-opacity-85 | backdrop-filter: opacity(0.85); |
| backdrop-opacity-90 | backdrop-filter: opacity(0.9); |
| backdrop-opacity-95 | backdrop-filter: opacity(0.95); |
| backdrop-opacity-100 | backdrop-filter: opacity(1); |
Tailwind CSS 背景不透明度类的功能
- backdrop-opacity-*:此类用于将背景不透明度滤镜应用于元素。此处的 {* 表示背景不透明度的值，可根据需要设置。
Tailwind CSS 背景不透明度类示例
以下示例说明了 Tailwind CSS 背景不透明度类的不同可见性和实用性。
示例
<!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 Opacity 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-opacity-10 backdrop-invert
absolute w-36 h-36 text-center
border-2 border-green-500 top-4 left-4
text-red-600 font-bold py-12">
Backdrop-opacity-0
</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-opacity-30 backdrop-invert
absolute w-36 h-36 left-4
border-2 border-green-500 top-4
text-red-600 font-bold py-12 text-center">
Backdrop-opacity-30
</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-opacity-80 backdrop-invert absolute w-36 h-36
border-2 border-green-500 top-4 left-4
text-red-600 font-bold py-12 text-center">
Backdrop-opacity-80
</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-opacity-100 backdrop-invert absolute w-36 h-36
border-2 border-green-500 top-4 left-4
text-red-600 font-bold py-12 text-center">
Backdrop-opacity-100
</div>
</div>
</div>
</body>
</html>
