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.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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