Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. La opacidad bg es la clase de un elemento que describe la transparencia del elemento. Es la alternativa al CSS Opacity/Transparency .
Clase de opacidad de fondo:
- background-opacity-0: controla la opacidad del fondo de un elemento usando las utilidades background-opacity-{amount} .
Nota: El número de la opacidad se puede cambiar de 0 a 100 con un intervalo de 5.
Sintaxis:
<element class="bg-{opacity}">...</element>
Ejemplo:
HTML
<!DOCTYPE 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 Background Opacity Class</b> <div class="mx-14 bg-green-200 grid grid-rows-4 grid-flow-col text-justify p-4"> <p class="bg-green-800 bg-opacity-100 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-green-800 bg-opacity-75 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-green-800 bg-opacity-50 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-green-800 bg-opacity-25 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-yellow-800 bg-opacity-100 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-yellow-800 bg-opacity-75 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-yellow-800 bg-opacity-50 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-yellow-800 bg-opacity-25 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-pink-800 bg-opacity-100 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-pink-800 bg-opacity-75 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-pink-800 bg-opacity-50 p-2"> A Computer Science Portal for Geeks </p> <p class="bg-pink-800 bg-opacity-25 p-2"> A Computer Science Portal for Geeks </p> </div> </body> </html>
Producción:
Clase de opacidad de fondo
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA