Inserire testo su immagine

Bottom Left
Top Left
Top Right
Bottom Right
Centered
Codice HTML
<div class="container"> <img src="https://www.puntoinformaticofree.it/guida_css/resources/foto/foto1.jpg" alt="Norway" style="width:100%;"> <div class="bottom-left">Bottom Left</div> <div class="top-left">Top Left</div> <div class="top-right">Top Right</div> <div class="bottom-right">Bottom Right</div> <div class="centered">Centered</div> </div>
Codice CSS
/* Container holding the image and the text */ .container { position: relative; text-align: center; color: white; }/* Bottom left text */ .bottom-left { position: absolute; bottom: 8px; left: 16px; }
/* Top left text */ .top-left { position: absolute; top: 8px; left: 16px; }
/* Top right text */ .top-right { position: absolute; top: 8px; right: 16px; }
/* Bottom right text */ .bottom-right { position: absolute; bottom: 8px; right: 16px; }
/* Centered text */ .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }