Técnicas de Substituição de Imagens e Padrões de Repetição

O objectivo desta técnica é demonstrar como o CSS pode ser utilizado para substituir texto HTML estruturado por imagens de texto de uma forma que permita aos utilizadores visualizarem o conteúdo de acordo com as suas preferências. Para utilizar esta técnica, o autor começa por criar uma página HTML que utiliza elementos semantic para marcar a estrutura da página. Em seguida, o autor cria duas ou mais folhas de estilo para essa página. Uma folha de estilo apresenta o texto HTML como texto e a segunda utiliza funcionalidades CSS para substituir algum do texto HTML por imagens de texto.Como mostrado a tecnica a abaixo.

HTML:

<h1 id="titulo"><span></span>Ao vencedor, as batatas</h1>

CSS:

#titulo{

  width:238px;

  height:26px;

  position:relative;

  overflow:hidden;

}

#titulo span{

  position:absolute;

  width:100%;

  height:100%;

  background:#fff url(/i/ao-vencedor.gif) no-repeat;

}

O resultado das técnicas mostradas a cima são:

Imagem com fundo transparente:

 

Imagem com fundo branco:

 

Padrões de Repetição para Imagens

 A propriedade background-repeat utiliza geralmente os valores repeat-x e repeat-y, que determinam o eixo no qual uma imagem será repetida. Há também o valor no-repeat, que evita que a imagem seja repetida.

 Os valores para a propriedade background-repeat devem ser utilizados em conjunto com a propriedade backgroun-image, para que seja possível determinar qual imagem será repetida.

 Assim como podemos repetir imagens na horizontal com a propriedade repeat-x, também podemos repeti-las na vertical com a propriedade repeat-y.

 Essa propriedade é muito útil para criar um fundo para o corpo do documento, evitando a renderização de uma imagem muito grande e de tamanho fixo.

 Se o desenvolvedor colocar uma imagem muito grande para o fundo da página inteira pode ocorrer de a página demorar para carregar.