0
214
VistasColocar una imagen encima del texto
¿Cómo puedo colocar una imagen en el texto superior? Como en la imagen dada
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Aquí hay un ejemplo básico usando flex . Puse un borde en el div para que puedas ver exactamente lo que hace el flex. Además, para un ejemplo como este en el que desea que la imagen esté directamente sobre el texto, debe buscar márgenes/relleno predeterminados. Por ejemplo, el elemento <p> tiene un margen predeterminado que establecí en 0.
.row { display: flex; flex-direction: column; border: solid 1px black; width: 200px; height: 80px; padding: 20px; background-color: #1e3f5a; } p { margin: 0; /* removes default p margin */ text-align: center; font-size: 30px; color: white; } img { align-self: flex-end; margin-right: 1.5rem; /* optional */ } <div class="row"> <img src="https://dummyimage.com/55x25/ed7014/fff&text=Trending"> <p>Dex Activity</p> </div>
·
Juan Pablo Isaza
Denunciar
0
Hay más de una técnica.
Aquí hay uno, tomado de w3schools :
<!DOCTYPE html> <html> <head> <style> .container { position: relative; } .topright { position: absolute; top: 8px; right: 16px; font-size: 18px; } img { width: 100%; height: auto; opacity: 0.3; } </style> </head> <body> <h2>Image Text</h2> <p>Add some text to an image in the top right corner:</p> <div class="container"> <img src="img_5terre_wide.jpg" alt="Cinque Terre" width="1000" height="300"> <div class="topright">Top Right</div> </div> </body> </html>
·
Juan Pablo Isaza
Denunciar
0
También puede usar la propiedad position css para esto, puede envolver estas dos etiquetas con un div y usar los métodos css flex.
Ejemplo flexible de CSS:
<div style="display:flex; flex-direction:column"><img src="IMG_URL" alt="..." style="align-self:flex-end"><p>Dex Activity<p/></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta