Esta clase acepta más de un valor en Tailwind CSS . Todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad background-image de CSS . Esta clase se utiliza para establecer una o más imágenes de fondo en un elemento. Por defecto, coloca la imagen en la esquina superior izquierda. Para especificar dos o más imágenes, separe las URL con una coma.
Clases de imagen de fondo:
- bg-none: esta clase no se usa para establecer ningún gradiente lineal .
- bg-gradient-to-t: esta clase se usa para establecer el gradiente lineal en la parte superior.
- bg-gradient-to-tr: esta clase se usa para establecer el gradiente lineal en la parte superior derecha.
- bg-gradient-to-r: esta clase se usa para establecer el gradiente lineal a la derecha.
- bg-gradient-to-br: esta clase se usa para establecer el gradiente lineal en la parte inferior derecha.
- bg-gradient-to-b: esta clase se usa para establecer el gradiente lineal en la parte inferior.
- bg-gradient-to-bl: esta clase se usa para establecer el gradiente lineal en la parte inferior izquierda.
- bg-gradient-to-l: esta clase se usa para establecer el gradiente lineal a la izquierda.
- bg-gradient-to-tl: esta clase se usa para establecer el gradiente lineal en la parte superior izquierda.
Sintaxis:
<element class="bg-gradient-to-{direction}">...</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"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Background Image Class</b> <div class="mx-4 grid grid-cols-3 gap-2"> <div class="h-12 w-full bg-gradient-to-r rounded-lg from-yellow-400 via-green-500 to-blue-500"> </div> <div class="h-12 w-full bg-gradient-to-tr rounded-lg from-yellow-400 via-green-500 to-blue-500"> </div> <div class="h-12 w-full bg-gradient-to-br rounded-lg from-yellow-400 via-green-500 to-blue-500"> </div> <div class="h-12 w-full bg-gradient-to-b rounded-lg from-yellow-400 via-green-500 to-blue-500"> </div> <div class="h-12 w-full bg-gradient-to-bl rounded-lg from-yellow-400 via-green-500 to-blue-500"> </div> <div class="h-12 w-full bg-gradient-to-tl rounded-lg from-yellow-400 via-green-500 to-blue-500"> </div> <div class="h-12 w-full bg-gradient-to-l rounded-lg from-yellow-400 via-green-500 to-blue-500"> </div> </body> </html>
Producción:
Imagen de fondo de Tailwind CSS
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA