Jump to content
Fórum Script Brasil
  • 0

Como coloca um texto por cima de uma imagem?


Lilialine

Question

6 answers to this question

Recommended Posts

  • 0
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

Edited by Paulo Junior
Link to comment
Share on other sites

  • 0

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...

Edited by Leonardo Leoni
Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

  • 0

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:

eoaekpa.png

Edited by Takanaue
detalhes...
Link to comment
Share on other sites

  • 0

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á.. 

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152.2k
    • Total Posts
      652k
×
×
  • Create New...