Tailwind CSS - 背景模糊

Tailwind CSS 背景模糊 是一個實用程式類，用於將背景模糊濾鏡應用於元素。

Tailwind CSS 背景模糊類

以下是用於有效應用背景模糊濾鏡的 Tailwind CSS 背景模糊 類的列表。

類	CSS 屬性
backdrop-blur-none	backdrop-filter: ;
backdrop-blur-sm	backdrop-filter: blur(4px);
backdrop-blur	backdrop-filter: blur(8px);
backdrop-blur-md	backdrop-filter: blur(12px);
backdrop-blur-lg	backdrop-filter: blur(16px);
backdrop-blur-xl	backdrop-filter: blur(24px);
backdrop-blur-2xl	backdrop-filter: blur(40px);
backdrop-blur-3xl	backdrop-filter: blur(64px);

Tailwind CSS 背景類的功能

backdrop-blur-none: 此類用於從元素中刪除背景模糊濾鏡。
backdrop-blur-sm: 此類用於將小的背景模糊濾鏡應用於模糊半徑為 4px 的元素。
backdrop-blur: 此類用於將模糊半徑為 8px 的背景模糊濾鏡應用於元素。
backdrop-blur-md: 此類用於將中等背景模糊濾鏡應用於模糊半徑為 12px 的元素。
backdrop-blur-lg: 此類用於將大的背景模糊濾鏡應用於模糊半徑為 16px 的元素。
backdrop-blur-xl: 此類用於將特大的背景模糊濾鏡應用於模糊半徑為 24px 的元素。
backdrop-blur-2xl: 此類用於將雙特大的背景模糊濾鏡應用於模糊半徑為 40px 的元素。
backdrop-blur-3xl: 此類用於將三特大的模糊濾鏡應用於模糊半徑為 64px 的元素。

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 Blur Classes
    </h2>
    <div class="flex gap-3 flex-wrap ">

        <div class="relative w-44 h-44">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-sm absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-sm
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-md absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-md
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-lg absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-lg
            </div>
        </div>
        
        <div class="relative w-44 h-44 ">
            <img class="object-fit w-full h-full" 
                 src=
"/javascript/images/javascript.jpg" 
                 alt="Image">
            <div class="backdrop-blur-2xl absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-lime-100 py-12 text-center">
                Backdrop-blur-2xl
            </div>
        </div>
    </div>
</body>

</html>

列印頁面