La clase Background Opacity es una función incorporada que se usa para aplicar un filtro a la imagen para convertir una imagen en una imagen sepia. En CSS, lo hacemos usando la función CSS opacity(). Tailwind CSS recientemente agregó brillo de funciones en la versión 2.1.
Opacidad del fondo:
- telón de fondo-opacidad-número:
Nota: Aquí el número es una variable que puede ser reemplazada por 0 a 100 con la brecha de 5 como 5,10, 15 ……. hasta 100.
Sintaxis:
<element class="filter backdrop-opacity-{number}">..</element>
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA