Pessoal, como faço para colocar texto em cima da imagem no HTML e CSS, sem colocar a imagem como background?! Poderiam me ajudar?!
Desde já agradeço.
Pessoal, como faço para colocar texto em cima da imagem no HTML e CSS, sem colocar a imagem como background?! Poderiam me ajudar?!
Desde já agradeço.
Olá Edith, tudo bom?
Para conseguir manipular o texto você precisa que os dois estejam no mesmo container, no caso uma div
por exemplo.
<div class="container">
<img
src="https://img.estadao.com.br/thumbs/640/resources/jpg/6/2/1580416980826.jpg"
/>
<p>MeooW</p>
</div>
Depois disso, pelo CSS você vai configurar as propriedades position e display para que você consiga movimentar o texto livremente através da imagem que será feita com as propriedades top, left, right e bottom.
.container {
display: inline-block;
position: relative;
}
.container p {
position: absolute;
top: 145px;
right: 20px;
font-size: 40px;
color: white;
}
Pronto! após isso você pode deixar da forma como preferir.
Obs: O exemplo que peguei foi do stackoverflow e apenas fiz algumas adaptações. Se quiser ver o modelo original Segue o link!
Espero ter ajudado ^^.
Muito, mais muito obrigada mesmo .... Vou inserir no meu projeto