- Programação

Como colocar um texto por cima de uma imagem no html

Bom, e muito simples, iremos usar o css também, então vamos lá:

Pra começar você cria duas divs, uma para a imagem e outra para o texto, e digite o texto que quiser, vai um exemplo de como deve ficar: 

<div class=“imagem”>

<div class=“texto”>

  O texto entra aqui…

</div>

</div>

O html já esta pronto, agora vamos para o css agora:

.imagem {

      width: 250px;
      height: 250px;
      background:url(‘http://url da imagem’);
}
.texto {
      position: absolute;
      background-color: rgba(0,0,0,0.5);
      color:#fff;
      text-align: center;
      top: 100px;
      width: 250px;
      line-height: 30px;
      height: 30px;
}

Agora um exemplo de como ficaria:

2 thoughts on “Como colocar um texto por cima de uma imagem no html

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *