Tailwind CSS - Opacity
Tailwind CSS Opacity 是一个实用类，它提供了一种有效的方法来控制任何元素的透明度。
Tailwind CSS Opacity 类
以下是 Tailwind CSS Opacity 类的列表，这些类提供了一种有效的方法来处理任何元素的透明度或不透明度。
| 类 | CSS 属性 |
|---|---|
| opacity-0 | opacity: 0; |
| opacity-5 | opacity: 0.05; |
| opacity-10 | opacity: 0.1; |
| opacity-15 | opacity: 0.15; |
| opacity-20 | opacity: 0.2; |
| opacity-25 | opacity: 0.25; |
| opacity-30 | opacity: 0.3; |
| opacity-35 | opacity: 0.35; |
| opacity-40 | opacity: 0.4; |
| opacity-45 | opacity: 0.45; |
| opacity-50 | opacity: 0.5; |
| opacity-55 | opacity: 0.55; |
| opacity-60 | opacity: 0.6; |
| opacity-65 | opacity: 0.65; |
| opacity-70 | opacity: 0.7; |
| opacity-75 | opacity: 0.75; |
| opacity-80 | opacity: 0.8; |
| opacity-85 | opacity: 0.85; |
| opacity-90 | opacity: 0.9; |
| opacity-95 | opacity: 0.95; |
| opacity-100 | opacity: 1; |
Tailwind CSS 盒阴影颜色类的功能
- opacity-* 此类用于定义元素的透明度。* 符号可以替换为 0 到 100 之间的任何有效数字，间隔为 5。
Tailwind CSS 不透明度类示例
以下示例将说明 Tailwind CSS 不透明度类的实用功能。
设置不同级别的不透明度
在此示例中，我们将使用不同的不透明度类为每个元素设置不同的不透明度级别。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Opacity Class
</h2>
<p>Opacity Effect are Decreasing on Each button</p>
<div class="flex">
<button class="bg-green-500 opacity-100
w-24 h-12 rounded-lg m-2">
opacity-100
</button>
<button class="bg-green-500 opacity-75
w-24 h-12 rounded-lg m-2">
opacity-75
</button>
<button class="bg-green-500 opacity-50
w-24 h-12 rounded-lg m-2">
opacity-50
</button>
<button class="bg-green-500 opacity-25
w-24 h-12 rounded-lg m-2">
opacity-25
</button>
</div>
</body>
</html>
鼠标悬停时移除不透明度
在下面的示例中，我们将鼠标悬停在元素上时不透明度设置为 100，以便元素清晰可见。
示例
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-4">
<h2 class="text-xl mb-3">
Tailwind CSS Opacity Class
</h2>
<button class="bg-green-500 opacity-50 hover:opacity-100
w-24 h-12 rounded-lg m-2">
Hover
</button>
</body>
</html>
