Como coloca um texto por cima de uma imagem?

Lilialine · Setembro 24, 2011

Olá... Eu sou nova no fórum e iniciante em html, e queria saber como faz para deixar um texto mais ou menos por cima de uma imagem, como se estivesse entrelaçado com a mesma.

É isso, obrigada...

Paulo Junior · Setembro 28, 2011

Lilialine disse:
Olá... Eu sou nova no fórum e iniciante em html, e queria saber como faz para deixar um texto mais ou menos por cima de uma imagem, como se estivesse entrelaçado com a mesma.
É isso, obrigada...

não tem como liliane pelo html não tem...você deve fazer isso no photoshop e depois colocar no site....thaw

Editado Setembro 28, 2011 por Paulo Junior

Leonardo Leoni · Setembro 29, 2011

Liliane não sei se entendi bem mas em CSS dá pra fazer

(Desculpa se estiver com algum erro ou mal explicado, to na correria que já estou para sair :s

Vamos supor que a imagem é 100x200

<html>
<head>
<title>Texto sobre imagem</title>

<style>
#imagem {
width: 100px;
height 200px;
}

#texto {
position: absolute;
margin-top: -30px;
}
</style>

</head>

<body>

<img id="imagem" src="www.link.com/imagem.jpg"/>
<div id="texto">Texto que fica sobre a imagem</div>

</body>
</html>

Não sei se deu pra entender, e não sei se é realmente isso que você quer... Se é pro texto vim de lado, em vez de margin-top: -30px; coloca margin-left: -30px;

Vá editando esses valores até achar a posição certa...

Editado Setembro 29, 2011 por Leonardo Leoni

Carlos Passos · Novembro 14, 2015

Em 29/09/2011 em 00:53, Leonardo Leoni disse:
Liliane não sei se entendi bem mas em CSS dá pra fazer
(Desculpa se estiver com algum erro ou mal explicado, to na correria que já estou para sair :s

Vamos supor que a imagem é 100x200
<html>
<head>
<title>Texto sobre imagem</title>

<style>
#imagem {
width: 100px;
height 200px;
}

#texto {
position: absolute;
margin-top: -30px;
}
</style>

</head>

<body>

<img id="imagem" src="www.link.com/imagem.jpg"/>
<div id="texto">Texto que fica sobre a imagem</div>

</body>
</html>
Não sei se deu pra entender, e não sei se é realmente isso que você quer... Se é pro texto vim de lado, em vez de margin-top: -30px; coloca margin-left: -30px;
Vá editando esses valores até achar a posição certa...

Cara Valeu tava apanhando muito ! o codigo foi perfeito!

Teteus · Dezembro 9, 2015

Não sei estou falando merda, mas acho que ficaria melhor usando o <figcaption> ao em vez de uma <DIV> semanticamente falando. podendo ate usar uma posição relativa.

Takanaue · Dezembro 13, 2015

Era mais ou menos assim que você queria?

//Divisória (sei que você não queria, mas tem que ser assim pra funcionar kk)

<div class="image">
<img src="http://blogdoprisco.com.br/wp-content/uploads/2015/07/dilma-rousseff-laguna.jpg" alt="" />
      
<h2><span>A melhor presidente do mundo:<span class='spacer'></span><br /><span class='spacer'></span>Dilma Rouseff</span></h2>

</div>

Logo abaixo se encontra o CSS:

.image { 

	   position: relative; 

	   width: 100%; /* for IE 6 */
}
h2 { 
   position: absolute; 
   top: 350px; 
   left: 0; 
   width: 100%; 
}

h2 span { 
   color: white; 
   font: bold 24px/45px Helvetica, Sans-Serif; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

Ficando assim a imagem:

Editado Dezembro 13, 2015 por Takanaue
detalhes...

fidelidade · Outubro 12, 2022

tem como colocar um aimagem por de traz de um texto? ou ocultar o texto seja invisivel ou dentro de uma caixa de texto e diminiroi aparecendo só uma parte? __ eu tenho um script com lista de nomes onde acrescenta um ao final e elimina a primeira porem queria que ficasse visivel apenas a primeira criei um artigo se puder rersponder por lá..

Entrar

Como coloca um texto por cima de uma imagem?

Pergunta

Lilialine

Link para o comentário

Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

Paulo Junior

Link para o comentário

Compartilhar em outros sites

Leonardo Leoni

Link para o comentário

Compartilhar em outros sites

Carlos Passos

Link para o comentário

Compartilhar em outros sites

Teteus

Link para o comentário

Compartilhar em outros sites

Takanaue

Link para o comentário

Compartilhar em outros sites

fidelidade

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades