0
490
Views¿Cómo superponer un <div> superior y un <div> inferior en una imagen sin generar espacios en blanco feos/desordenados?
Tengo un div superior, una imagen y un div inferior en mi html y quiero superponer los 2 divs en mi imagen, el primer div debe cubrir un área en la parte superior de la imagen y el div inferior debe cubrir un poco área en la parte inferior de la imagen, el div debe ser el que cubre la imagen (en el frente de la pantalla). ¿Cómo haría eso de una manera limpia (sin dejar espacios en blanco) y hacerlo receptivo con respecto al ancho de la vista o div principal?
aquí está mi html
* { padding: 0px; margin: 0px; } #image { max-width: 100%; } .rects { height: 100px; } #rect-top { background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479)); } #rect-bottom { background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75)); } <h1>Start</h1> <div id="rect-top" class="rects"></div> <img id="image" src="image-with-gradient.jpg"> <div id="rect-bottom" class="rects"></div> <h1>End</h1>esto es lo que quiero lograr:
como puede ver, no hay espacios en blanco antes y después de las etiquetas h1
1 answers
Answer question0
Envuelve tu imagen y los divs superpuestos en un div. Dentro de eso, position sus elementos div superpuestos absolute .
Como nota al margen, no use id para fines de estilo. También tenga en cuenta que cualquier id en su página solo puede vivir en un solo elemento; El id debe ser único por documento.
En lugar de crear marcas sin sentido para los degradados, puede usar los pseudo elementos ::before y ::after aquí.
* { padding: 0; margin: 0; } .image-container { padding: 50px 0; position: relative; } .image { max-width: 100%; } .image-container::before, .image-container::after { content: ''; height: 100px; position: absolute; width: 100%; } .image-container::before { background-image: linear-gradient(45deg, rgba(0, 194, 228, 0.75), rgba(214, 0, 203, 0.479)); top: 0; } .image-container::after { background-image: linear-gradient(45deg, rgba(214, 0, 203, 0.479), rgba(0, 194, 228, 0.75)); bottom: 0; } <h1>Start</h1> <div class="image-container"> <img class="image" src="https://placekitten.com/g/1920/1080"> </div> <h1>End</h1> Esto también hace que el uso del z-index sea obsoleto porque los elementos con position: absolute están automáticamente encima de los elementos no posicionados.