Tailwind CSS - 背景不透明度

Tailwind CSS 背景不透明度是一個實用程式類，用於將背景不透明度濾鏡應用於元素。

Tailwind CSS 背景不透明度類

以下是用於有效應用背景不透明度濾鏡的Tailwind CSS 背景不透明度類的列表。

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

列印頁面