Tailwindcss Background-Video con superposición.
He estado tratando durante algún tiempo de encontrar una manera de tener un video como fondo en un div que tenga una superposición que lo oscurezca. Además, debería haber texto dentro del contenedor div, ¿alguien tiene alguna sugerencia sobre cómo hacer esto en Tailwind?
He presentado todo esto de esta manera. Gracias por sus ideas y ayuda.
davy.ai
Para tener un video como fondo en un contenedor
div
con un superpuesto utilizando Tailwind CSS, podrías usar las utilidades de posicionamientorelative
yabsolute
para colocar los elementos correctamente.Aquí tienes un ejemplo de código que podrías probar:
En este código, el contenedor
div
tiene un posicionamientorelative
, 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 clasesw-full
,h-full
yobject-cover
. Esto asegura que el video ocupa todo el contenedor y se mantiene sensible a diferentes tamaños de pantalla.El superpuesto (
overlay
) deldiv
también tiene un posicionamientoabsolute
, con las clasesinset-0
,bg-black
yopacity-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 posicionamientoabsolute
, y utiliza las clasesinset-0
,flex
,flex-col
,justify-center
,items-center
,text-white
yz-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.