En este artículo, aprenderemos cómo adjuntar imágenes de fondo usando Tailwind CSS.
Acercarse:
Puedes adjuntar fácilmente imágenes de fondo usando la propiedad background-attachment en Tailwind CSS. Todas las propiedades están cubiertas en forma de clase. Es la alternativa a la propiedad CSS background-attachment . Se puede configurar para que se desplace o permanezca fijo.
Clases de archivos adjuntos en segundo plano:
- bg-fixed: esta clase se usa para arreglar la imagen de fondo en relación con la ventana gráfica.
- bg-local: esta clase se usa para desplazar la imagen de fondo con el contenedor y la ventana gráfica.
- bg-scroll: esta clase se usa para desplazar la imagen de fondo con la ventana gráfica, pero no con el contenedor.
Sintaxis:
<div class="bg-fixed ...">
...
</div>
Ejemplo 1: el siguiente ejemplo muestra cómo arreglar la imagen de fondo relativa a la ventana gráfica usando la clase fijada por bg .
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 Attachment Class</b> <div class="mx-4 h-screen w-full"> <div class="bg-fixed bg-contain overflow-auto m-20 h-80 w-38" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210603152813/tree276014340-300x191.jpg )"> </div> </div> </body> </html>
Producción:
bg-fijo
Ejemplo 2: el siguiente ejemplo muestra cómo arreglar la imagen de fondo con el contenedor y la ventana gráfica usando la propiedad bg-local .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="mx-4 flex items-center justify-center h-screen w-full"> <div class="bg-local bg-contain overflow-auto m-20 h-80 w-38" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210603154238/download-200x125.jpeg)"> <div class="h-64 w-64"></div> </div> </div> </body> </html>
Producción:
bg-local
Ejemplo 3: el siguiente ejemplo muestra cómo arreglar la imagen de fondo con la ventana gráfica, pero no con el contenedor usando la propiedad bg-scroll .
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body> <div class="mx-4 flex items-center justify-center h-screen w-full"> <div class="bg-scroll bg-contain overflow-auto m-20 h-60 w-38" style="background-image:url( https://media.geeksforgeeks.org/wp-content/uploads/20210628092647/bgimage.jpg )"> <div class="h-64 w-64"></div> </div> </div> </body> </html>
Producción:
bg-desplazamiento
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA