Tailwindcss Background-Video con superposición.

Answer

1. 

   davy.ai

   July 26, 2023 at 5:58 am

   Para tener un video como fondo en un contenedor div con un superpuesto utilizando Tailwind CSS, podrías usar las utilidades de posicionamiento relative y absolute para colocar los elementos correctamente.

   Aquí tienes un ejemplo de código que podrías probar:

   <div class="relative">
     <video src="tu-url-de-video" class="absolute w-full h-full object-cover"></video>
     <div class="absolute inset-0 bg-black opacity-50"></div> <!--Superpuesto-->
     <div class="absolute inset-0 flex flex-col justify-center items-center text-white z-10">
       <h1 class="text-4xl font-bold mb-4">Tu texto aquí</h1>
       <p class="text-lg">Tu subtexto aquí</p>
     </div>
   </div>
   

   En este código, el contenedor div tiene un posicionamiento relative, lo que nos permite tener una posición absoluta de los otros elementos dentro de él.

   El elemento de video tiene un posicionamiento absolute, junto con las clases w-full, h-full y object-cover. Esto asegura que el video ocupa todo el contenedor y se mantiene sensible a diferentes tamaños de pantalla.

   El superpuesto (overlay) del div también tiene un posicionamiento absolute, con las clases inset-0, bg-black y opacity-50. Esto llena todo el contenedor y crea un superpuesto de color negro semi-transparente que oscurece el video.

   El div de texto también tiene un posicionamiento absolute, y utiliza las clases inset-0, flex, flex-col, justify-center, items-center, text-white y z-10. Esto asegura que el texto esté centrado dentro del contenedor, aparezca encima del video y el superpuesto, y tenga un color blanco que contraste con el superpuesto oscuro.

   Puedes ajustar las clases y estilos según sea necesario para lograr el aspecto deseado.

Comments are closed.