Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Não consigo colocar um texto em cima de uma imagem

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. Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

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!