Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Al usar esta clase podemos establecer la opacidad de cualquier división. En CSS, hacemos eso usando la propiedad CSS Opacity .
Dividir clases de opacidad:
- divide-opacity-0: controla la opacidad del color del marcador de posición de un elemento usando las utilidades divide-opacity-{cantidad}.
Nota: El número de la opacidad se puede cambiar de 0 a 100 con un intervalo de 5.
Sintaxis:
<element class="divide-{opacity}">...</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"> <h2 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h2> <b>Tailwind CSS Divide Opacity Class</b> <div class="mx-4 bg-green-200 p-2"> <div class="grid grid-cols-3 divide-x-4 divide-pink-500 divide-opacity-25"> <div><b>1.</b>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> <div style="height:10px"> </div> <div class="grid grid-cols-3 divide-x-4 divide-pink-500 divide-opacity-50"> <div><b>2.</b>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> <div style="height:10px"> </div> <div class="grid grid-cols-3 divide-x-4 divide-pink-500 divide-opacity-80"> <div><b>3.</b>GeeksforGeeks</div> <div>A Computer Science Portal</div> <div>For Geeks</div> </div> </div> </body> </html>
Producción:
Dividir clase de opacidad
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA