Escrever por cima das imagens

Dois exemplos simples para constatar que isto é possível.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 03/2/06
Valorize este artigo:
Neste workshop de HTML vamos aprender a colocar texto em cima de uma imagem, utilizando um pequeno truque com tabelas.

Como o leitor saberá, as imagens ocupam um espaço na página que não pode ser ocupada com texto, ou seja, se colocarmos uma imagem em um lugar, à princípio, não poderia ser colocado nem texto nem outros elementos em cima. Bom, isto não é totalmente certo. Realmente, pode-se utilizar camadas para realizar essa tarefa, mas o trabalho com camadas sempre é complicado e pode chegar a dar problemas de compatibilidade com diferentes navegadores.

Este exemplo pode ser útil para muitos casos. Por exemplo, para lidar com fundos que tenham várias cores, ou para escrever texto decorado com um fundo bonito de imagem que não tem porque se repetir em toda a página.

O melhor é visualizarmos o efeito buscado em uma página a parte.

O código deste exemplo é o seguinte:

<table border=1 bordercolor=black align=center width=159 cellpadding=3 cellspacing=2 background="huella.gif" height="146">
<tr>
<td>
<font size=2 face="arial,verdana">
<br>
Esta é a digital do meu cachorro.
<br>
<br>
Estou muito contente de que se passeie de vez em quando por este site.
</font>
</td>
</tr>
</table>


Trata-se de uma tabela a qual colocamos uma imagem de fundo, utilizando o atributo background. Para que apareça a imagem inteira, a tabela se dimensiona ao tamanho da imagem. O texto que quisermos escrever no fundo da imagem se coloca, tal qual, na célula.

Outro exemplo de imagem de fundo na tabela

Outro efeito que fica muito atraente é criar ima imagem com uma trama de duas cores, que pode ser utilizada de fundo, na página ou então em uma tabela.

Pode-se ver o exemplo aqui.

O código da tabela seria o seguinte:

<table align=center width=700 cellpadding=3 cellspacing=2 background="trama.gif" bgcolor="000000">
<tr>
<td>
<font size=2 face="arial,verdana" color="#ffffff">
Isto poderia ser uma barra de links | Link 2 | Outro link | Termino com os links
</font>
</td>
</tr>
</table>


É um exemplo muito simples e pode se conseguir um efeito bastante elaborado. Se embelezarmos um pouco mais, poderia ser utilizado para uma barra de navegação muito decente.

Observação: É importante que a cor das tabelas (atributo bgcolor) ou as células onde você for colocar as imagens de fundo (atributo background) seja o mais parecido à cor predominante da imagem. Deste modo, poderão ser vistos perfeitamente os textos que estiverem escritos na célula enquanto se carrega a imagem de fundo ou, inclusive, se chega a se carregar por qualquer problema.





Comentários do artigo
Foram enviados 17 comentários ao artigo
9 comentários não revisados
8 comentários revisados:
Por: Alberto
13/3/06
As dicas são válidas.
Mas não podemos nos esquecer da TAG
STYLE. Nela além de podermos colocar uma imagem de fundo, que não necessariamente precise ter um tamanho fixo para localizar a imagem na tabela, podemos em uma tabela de qualquer valor localizar a imagem dentro dela usando por exemplo:
STYLE="background-image: url(a sua imagem); background-position: 0px 1px">
usando o background-position podemos posicionar a imagem em qualquer local da <table> ou <td>.
Tem muito mais atributos para imagem dentro de STYLE.
Fiquem na Paz!
Por: silvio
03/1/08
O comentário do artigo "Realmente, pode-se utilizar camadas para realizar essa tarefa, mas o trabalho com camadas sempre é complicado e pode chegar a dar problemas de compatibilidade com diferentes navegadores. " parece desmotivar quem está aprendendo html a usar as regras 'politicamente corretas' na construcao de sites... acho que sair colocando tabelas por aí não é uma boa prática e não deveria ser tão entusiasmada.
Por: maria edna
24/3/08
oxente mainha isso e horrivel nao da pra ver nada nao da pra fazer detestei
Por: cintia
01/7/08
eu pensei ke este site tinha imagens e ke nos podiamos escrever nelas mas nao ,este site nao presta ,gostaria de saber para ke que ele serve sera ke podiam dizerme , simsseramente tou dias a procura de imagens e aparecen-me com este site e mais uma unica vez
Por: Danilo Silva
10/8/08
Infelizmente, não se pode agradar a todos, mas este artigo me agradou muito. Depois de procurar bastante, foi o único que compreendi e consegui fazer o que precisava. Seu site é excelente e, com imagens ou não, ajuda muitas pessoas como eu a adquirir um pouco mais de conhecimento, que nunca é demais e é a única coisa que ninguém pode nos tirar. Muito obrigado!
--.-- Pensem!
Por: Patrícia Machado
06/1/09
Eita povo que reclama...

Primeiramente que aqui é a parte de html básico, então ÓBVIAMENTE o cara só vai explicar como colocar imagens em tabelas... Se quer usar css (que deve ser colocado separado do código e não em "style" dentro do html) tem de ir na parte de CSS...

E Cintia, vc não precisa de um site com imagens, vc precisa é de um professor de português! Deve ser por isso que não entendeu para que serve o site.

"Por: cintia
eu pensei ke este site tinha imagens e ke nos podiamos escrever nelas mas nao ,este site nao presta ,gostaria de saber para ke que ele serve sera ke podiam dizerme , simsseramente tou dias a procura de imagens e aparecen-me com este site e mais uma unica vez "
Htmail
Por: zatch
19/7/09
xD...
esse primeiros comentario entedir os codigo mais não o desçifrei !
pois eu mexo muito com esse tipos de codigos !
poderia me explicar melhor sobre pois esta difiçil por a imagem sem que ela esteja rasurada, cortada etc... !
quem puder me ajudar meu imail é jhonatansilvaqueiros@hotmail.com
Assinatura Pessoal com Imagem?
Por: tjpoeta
19/8/09
Olá, colega. Não sei se vc tem tempo pra se dispor a me responder, entretanto gostaria ainda assim q vc me enviasse um email explicativo, claro, se possível, me orientando o procedimento de como criar uma assinatura pessoal (Hotmail), na qual conste uma imagem. Basicamente, parece simples, mas pra quem não entende como eu, fica a complicação: adiciono códigos e no final o que aparece na assinatura é o próprio código e não a imagem. :(

Como fazer então?

Vê, pra facilitar o link da imagem é o seguinte (p/ teste):

http://haphpw.blu.livefilestore.com/y1pOTJn3C1bPgG5wffE4pobf2cMf7uH5GOW4jkHAAgiipUq4FIGH92ZSvnaePMR5QFL5KwwAc2vZu25ZODVSPhCPQ/Assinatura%20Pessoal%20do%20Trabalho.jpg

Tem como cê me enviar o código q devo adicionar no campo de assinatura?

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato