Lớp Backdrop Opacity là một hàm dựng sẵn. Nó được sử dụng để áp dụng bộ lọc cho ảnh, đặt độ trong suốt. Trong CSS, chúng ta làm điều đó bằng cách sử dụng CSS opacity() Function. Tailwind CSS đã thêm tính năng brightness mới trong phiên bản 2.1.
Backdrop Opacity:
- backdrop-opacity-number:
Note: Ở đây, number là một biến có thể thay thế bằng 0 đến 100. Khoảng cách giữa các giá trị là 5, ví dụ: 5, 10, 15... đến 100.
Syntax:
<element class="filter backdrop-opacity-{number}">..</element>
Example:
HTML<!DOCTYPE html>
<html>
<head>
<link href=
"https://unpkg.com/tailwindcss@^2.1/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="text-center mx-4 ">
<h1 class="text-green-600 text-5xl font-bold">
GeeksforGeeks
</h1>
<b>Tailwind CSS Backdrop Opacity Class</b>
<div class=" mx-16 mt-18 h-36 relative">
<div class="absolute w-full py-18">
<img class="rounded-lg object-cover"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210605213323/Screenshot20210605213311.png"
alt="image">
</div>
<div class="relative h-32 flex overflow-x-auto space-x-4">
<div class="flex-shrink-0 border-4 border-green-500
backdrop-filter backdrop-hue-rotate-90 w-1/2">
</div>
<div class="flex-shrink-0 border-4 border-green-500
backdrop-filter backdrop-hue-rotate-90
backdrop-opacity-25 w-1/2">
</div>
</div>
</div>
</body>
</html>
Output:
