Image Replacement – Episódio 2
Postado por: Pedro Rogério emApós o meu primeiro post ensinando a técnica de image replacement, vou postar aqui uma outra técnica, um pouco mais avançada, que faz o uso de <span>, mas também não deixa de ser simples. O que devemos fazer é o seguinte:
Aqui o CSS:
h1 {
height:200px;
background:url("logotipo.jpg") no-repeat;
}
h1 span { display:none; }
Aqui só é necessário colocar a altura da imagem e colocar normalmente o “no-repeat” para que não haja repetição alguma da imagem, por que nós não queremos isso. O que entra depois é o “span” com “display:none” para que ele desapareça com o nosso texto.
Aqui o HTML:
<h1><span>Pinceladas da Web</span></h1>
Para que haja uma melhor interação com o tutorial, dê uma olhada nesse exemplo, experimente desabilitar o CSS para ver o resultado.














You should be careful. Some screen readers will not read the
display:nonetext.Thanks for the tip Federico!!!