Tailwind CSS - Backdrop Hue Rotate
Tailwind CSS backdrop-hue-rotate 是一个实用类，用于将背景色旋转滤镜应用于元素。
Tailwind CSS backdrop-hue-rotate 类
以下是 Tailwind CSS backdrop-hue-rotate 类的列表，这些类可用于有效地应用背景色旋转滤镜。
| 类 | 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>
