Tailwind CSS - 不透明度

Tailwind CSS 不透明度是一个实用程序类，它提供了一种控制任何元素透明度的有效方法。

Tailwind CSS 不透明度类

以下是Tailwind CSS 不透明度类的列表，它们提供了一种有效处理任何元素的透明度或不透明度的方法。

类	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。

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-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，以便元素可以清晰可见。

示例

Open Compiler

<!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>

打印页面