笙亿网络策划

Tailwind CSS 怎么设置 Backdrop Opacity 背景透明度？

约 8 分钟读完 0 阅
文章导读
上一个 测验 下一个 Tailwind CSS Backdrop Opacity 是一个用于为元素应用背景遮罩不透明度过滤器的 utility class。
📋 目录
  1. 壹 Tailwind CSS Backdrop Opacity 类
  2. 贰 Tailwind CSS BackdropTailwind CSS 背景遮罩不透明度类示例
A A

Tailwind CSS - 背景遮罩不透明度

上一个
测验
下一个

Tailwind CSS Backdrop Opacity 是一个用于为元素应用背景遮罩不透明度过滤器的 utility class。

Tailwind CSS Backdrop Opacity 类

以下是用于有效应用背景遮罩不透明度过滤器的 Tailwind CSS Backdrop Opacity 类列表。

Class CSS Properties
backdrop-opacity-0 backdrop-filter: opacity(0%);
backdrop-opacity-5 backdrop-filter: opacity(5%);
backdrop-opacity-10 backdrop-filter: opacity(10%);
backdrop-opacity-15 backdrop-filter: opacity(15%);
backdrop-opacity-20 backdrop-filter: opacity(20%);
backdrop-opacity-25 backdrop-filter: opacity(25%);
backdrop-opacity-30 backdrop-filter: opacity(30%);
backdrop-opacity-35 backdrop-filter: opacity(35%);
backdrop-opacity-40 backdrop-filter: opacity(40%);
backdrop-opacity-45 backdrop-filter: opacity(45%);
backdrop-opacity-50 backdrop-filter: opacity(50%);
backdrop-opacity-55 backdrop-filter: opacity(55%);
backdrop-opacity-60 backdrop-filter: opacity(60%);
backdrop-opacity-65 backdrop-filter: opacity(65%);
backdrop-opacity-70 backdrop-filter: opacity(70%);
backdrop-opacity-75 backdrop-filter: opacity(75%);
backdrop-opacity-80 backdrop-filter: opacity(80%);
backdrop-opacity-85 backdrop-filter: opacity(85%);
backdrop-opacity-90 backdrop-filter: opacity(90%);
backdrop-opacity-95 backdrop-filter: opacity(95%);
backdrop-opacity-100 backdrop-filter: opacity(100%);

Tailwind CSS Backdrop

Tailwind CSS 背景遮罩不透明度类示例

以下示例展示了 Tailwind CSS 背景遮罩不透明度类（Backdrop Opacity classes）的不同可见度和实用工具。

示例

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