Como - Posicionar o texto sobre uma imagem
Saiba como colocar texto sobre uma imagem.
Texto da imagem
Inferior esquerdo
Superior esquerdo
Canto superior direito
Canto inferior direito
Centralizado
Como colocar texto na imagem
Etapa 1) Adicionar HTML:
Exemplo
<div class="container">
<img src="img_snow_wide.jpg" alt="Snow"
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>
Etapa 2) Adicionar CSS:
Exemplo
/* 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%);
}
Para saber mais sobre como estilizar imagens, leia nosso tutorial de Imagens CSS .
Para saber mais sobre posicionamento CSS, leia nosso tutorial Posição CSS .