Tailwind CSS - 背景色調旋轉

Tailwind CSS 背景色調旋轉 是一個實用程式類，用於將背景色調旋轉濾鏡應用於元素。

Tailwind CSS 背景色調旋轉類

以下是用於有效應用背景色調旋轉濾鏡的 Tailwind CSS 背景色調旋轉 類列表。

類	CSS 屬性
backdrop-hue-rotate-0	filter: backdrop-hue-rotate(0deg);
backdrop-hue-rotate-15	filter: backdrop-hue-rotate(15deg);
backdrop-hue-rotate-30	filter: backdrop-hue-rotate(30deg);
backdrop-hue-rotate-60	filter: backdrop-hue-rotate(60deg);
backdrop-hue-rotate-90	filter: backdrop-hue-rotate(90deg);
backdrop-hue-rotate-180	filter: backdrop-hue-rotate(180deg);

Tailwind CSS 背景色調旋轉類的功能

backdrop-hue-rotate-0: 此類用於從元素中刪除背景色調旋轉濾鏡。
backdrop-hue-rotate-15: 此類用於將元素的背景色調旋轉 15 度。
backdrop-hue-rotate-30: 此類用於將元素的背景色調旋轉 30 度。
backdrop-hue-rotate-60: 此類用於將元素的背景色調旋轉 60 度。
backdrop-hue-rotate-90: 此類用於將元素的背景色調旋轉 90 度。
backdrop-hue-rotate-180: 此類用於將元素的背景色調旋轉 180 度。

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 Hue Rotate 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-hue-rotate-30 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-15
            </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-hue-rotate-60 absolute w-36 h-36
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-75
            </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-hue-rotate-90 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-100
            </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-hue-rotate-180 absolute w-36 h-36 
                        border-2 border-green-500 top-4 left-4 
                        text-red-600 font-bold py-12 text-center">
                Backdrop-hue-rotate-200
            </div>
        </div>
    </div>
</body>

</html>

列印頁面