Tailwind CSS Opacidad – Part 2

Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Usando esta clase podemos establecer la opacidad de cualquier elemento. En CSS, hacemos eso usando la propiedad CSS Opacity .

Clase de opacidad:

  • opacity-0: Controla la opacidad de un elemento.

Nota: El número de la opacidad se puede cambiar de 0 a 100 con un intervalo de 5.

Sintaxis:

<element class="opacity-{number}">...</element>

Ejemplo:

HTML

<!DOCTYPE html> 
<html>
<head> 
    <link href= 
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
        rel="stylesheet"> 
</head> 
  
<body class="text-center mx-4 space-y-2"> 
    <h1 class="text-green-600 text-5xl font-bold"> 
        GeeksforGeeks 
    </h1> 
    <b>Tailwind CSS Opacity Class</b> 
    <div class="grid grid-flow-col text-center p-2"> 
        <div class="opacity-100  w-24 h-24 bg-green-500 
                    rounded-lg">opacity-100
        </div>
        <div class="opacity-75 w-24 h-24 bg-green-500 
                    rounded-lg">opacity-75
        </div>
        <div class="opacity-50 w-24 h-24 bg-green-500 
                    rounded-lg">opacity-50
        </div>
        <div class="opacity-25 w-24 h-24 bg-green-500 
                    rounded-lg">opacity-25
        </div>
        <div class="opacity-0  w-24 h-24 bg-green-500 
                    rounded-lg">opacity-0
        </div>
    </div> 
</body> 
  
</html> 

Producción:

Clase de opacidad CSS Tailwind

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *