Estou trabalhando num projeto para praticar e queria colocar um texto em cima da imagem de fundo. Porém, não estou conseguindo colocar nada e queria saber como resolver.
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!
Estou trabalhando num projeto para praticar e queria colocar um texto em cima da imagem de fundo. Porém, não estou conseguindo colocar nada e queria saber como resolver.
Olá Pedro, tudo bem contigo?
Para colocar um texto em cima de uma imagem, você pode utilizar a propriedade CSS position e z-index. Primeiro, defina a posição da imagem como relative e do texto como absolute. Em seguida, defina o valor de z-index do texto como maior do que o da imagem.
Segue um exemplo de código:
HTML:
<div class="container">
<img src="imagem.jpg" alt="Imagem de fundo">
<div class="texto">Texto em cima da imagem</div>
</div>CSS:
.container {
position: relative;
}
.texto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}Nesse exemplo, a imagem está em uma div com a classe container, que tem a posição definida como relative. Já o texto está dentro de outra div com a classe "texto", que tem a posição definida como absolute. O valor de z-index do texto é 1, o que faz com que ele fique acima da imagem.
Espero ter ajudado e bons estudos!