Tailwind CSS - Backdrop Brightness
Tailwind CSS backdrop-brightness 是一个实用类，用于将背景亮度滤镜应用于元素。
Tailwind CSS backdrop-brightness 类
以下是用于有效应用背景亮度滤镜的 Tailwind CSS 背景亮度 类列表。
| 类 | CSS 属性 |
|---|---|
| backdrop-brightness-0 | backdrop-filter: brightness(0); |
| backdrop-brightness-50 | backdrop-filter: brightness(.5); |
| backdrop-brightness-75 | backdrop-filter: brightness(.75); |
| backdrop-brightness-90 | backdrop-filter: brightness(.9); |
| backdrop-brightness-95 | backdrop-filter: brightness(.95); |
| backdrop-brightness-100 | backdrop-filter: brightness(1); |
| backdrop-brightness-105 | backdrop-filter: brightness(1.05); |
| backdrop-brightness-110 | backdrop-filter: brightness(1.1); |
| backdrop-brightness-125 | backdrop-filter: brightness(1.25); |
| backdrop-brightness-150 | backdrop-filter: brightness(1.5); |
| backdrop-brightness-200 | backdrop-filter: brightness(2); |
Tailwind CSS 背景亮度类的功能
- Backdrop Brightness-*: 类用于有效调整元素的背景亮度。{*} 此处指定可根据需要设置的不同背景亮度值。
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 Brightness 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-brightness-50 absolute w-36 h-36
border-2 border-green-500 top-4 left-4
text-red-600 font-bold py-12 text-center">
Backdrop-Brightness-50
</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-brightness-75 absolute w-36 h-36
border-2 border-green-500 top-4 left-4
text-red-600 font-bold py-12 text-center">
Backdrop-Brightness-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-brightness-125 absolute w-36 h-36
border-2 border-green-500 top-4 left-4
text-red-600 font-bold py-12 text-center">
Backdrop-Brightness-125
</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-brightness-200 absolute w-36 h-36
border-2 border-green-500 top-4 left-4
text-red-600 font-bold py-12 text-center">
Backdrop-Brightness-200
</div>
</div>
</div>
</body>
</html>
