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 CSS background-size . Esta clase se utiliza para establecer el tamaño de la imagen de fondo.
Clases de tamaño de fondo:
- bg-auto
- bg-portada
- bg-contener
bg-auto: se utiliza para establecer la clase de tamaño de fondo en su valor predeterminado. Se utiliza para mostrar la imagen de fondo a su tamaño original.
Sintaxis:
<element class="bg-auto">...</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 Size Space Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-no-repeat bg-auto bg-center bg-green-200 w-full h-48 border-2" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)"> </div> </div> </body> </html>
Producción:
bg-cover: se utiliza para cambiar el tamaño de la imagen de fondo para cubrir un elemento contenedor completo.
Sintaxis:
<element class="bg-cover">...</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 Size Space Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-no-repeat bg-cover bg-center bg-green-200 w-full h-48 border-2" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)"> </div> </div> </body> </html>
Producción:
bg-contain: Se utiliza para contener la imagen de fondo dentro del contenedor mediante el encogimiento.
Sintaxis:
<element class="bg-contain">...</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 Size Space Class</b> <div class="bg-green-300 mx-16 space-y-4 p-2 justify-between"> <div class="bg-no-repeat bg-contain bg-center bg-green-200 w-full h-48 border-2" style="background-image: url( https://media.geeksforgeeks.org/wp-content/uploads/20210222231443/Screenshot20210222231435.png)"> </div> </div> </body> </html>
Producció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