Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas como en forma de clase. Al usar esta clase, podemos establecer la opacidad de cualquier texto de marcador de posición. En CSS, hacemos eso usando la propiedad CSS Opacity.
Marcador de posición Clase de opacidad:
- placeholder-opacity-0: controle la opacidad del color del marcador de posición de un elemento utilizando las utilidades placeholder-opacity-{amount} .
Nota: El número de la opacidad se puede cambiar de 0 a 100 con un intervalo de 5.
Sintaxis:
<element class="placeholder-{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 Placeholder Opacity Class</b> <div class="mx-14 bg-green-200 grid grid-rows-4 grid-flow-col text-justify p-4"> <input class="placeholder-green-800 p-3 m-2 rounded-lg placeholder-opacity-100 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-green-800 p-3 m-2 rounded-lg placeholder-opacity-75 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-green-800 p-3 m-2 rounded-lg placeholder-opacity-50 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-green-800 p-3 m-2 rounded-lg placeholder-opacity-25 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-yellow-800 p-3 m-2 rounded-lg placeholder-opacity-100 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-yellow-800 p-3 m-2 rounded-lg placeholder-opacity-75 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-yellow-800 p-3 m-2 rounded-lg placeholder-opacity-50 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-yellow-800 p-3 m-2 rounded-lg placeholder-opacity-25 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-indigo-800 p-3 m-2 rounded-lg placeholder-opacity-100 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-indigo-800 p-3 m-2 rounded-lg placeholder-opacity-75 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-indigo-800 p-3 m-2 rounded-lg placeholder-opacity-50 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> <input class="placeholder-indigo-800 p-3 m-2 rounded-lg placeholder-opacity-25 border-2 border-green-400 bg-green-100" placeholder="Geeksforgeeks@gfg.org"> </div> </body> </html>
Producción:
opacidad de marcador de posició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