Sprite de Imagem CSS

Imagem de sprite

Imagem de sprite é um conjunto de imagens contidas em uma única imagem.

Páginas que contêm muitos imagens podem levar muito tempo para carregar e gerar várias solicitações de servidores.

Usar imagens de sprites reduz o número de solicitações do servidor e economiza largura de banda.

Imagem de sprite - Exemplo simples

Usamos a seguinte única imagem ("navsprites.gif") em vez de três imagens separadas:

Imagem de Navegação

Usando CSS, podemos exibir apenas uma parte da imagem necessária.

Neste exemplo, o CSS especifica qual parte da imagem "navsprites.gif" deve ser exibida:

Exemplo

#home {
  width: 46px;
  height: 44px;
  background: url(navsprites.gif) 0 0;
}

Experimente você mesmo

Explicação do exemplo:

  • <img id="home" src="trans.gif"> - Definir apenas uma pequena imagem transparente, pois a propriedade src não pode estar vazia. A imagem realmente exibida será a imagem de fundo especificada no CSS.
  • width: 46px; height: 44px; - Definir a parte da imagem que usaremos
  • background: url(navsprites.gif) 0 0; - Definir a imagem de fundo e sua posição (left 0px, top 0px)

Imagem de sprite - Criação de lista de navegação

Desejamos usar imagens de sprites ("navsprites.gif") para criar uma lista de navegação.

Vamos usar uma lista HTML, pois ela pode ser um link e ainda suporta imagens de fundo:

Exemplo

#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('img_navsprites.gif') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('img_navsprites.gif') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('img_navsprites.gif') -91px 0;
}

Experimente você mesmo

Explicação do exemplo:

  • #navlist {position:relative;} - A posição é configurada como relativa, permitindo a locação absoluta dentro dela
  • #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - Margem e preenchimento são definidos como 0, o list-style é removido e todos os itens da lista são absolutamente posicionados
  • #navlist li, #navlist a {height:44px;display:block;} - A altura de todas as imagens é de 44px

Agora, começamos a definir a posição e o estilo para cada parte específica:

  • #home {left:0px;width:46px;} - Posiciona-se sempre para a esquerda, largura da imagem 46px
  • #home {background:url(navsprites.gif) 0 0;} - Define a imagem de fundo e sua posição (left 0px, top 0px)
  • #prev {left:63px;width:43px;} - Posiciona à direita 63px (largura do #home 46px + alguns espaços adicionais entre os itens), largura 43px.
  • #prev {background:url('navsprites.gif') -47px 0;} - Define a imagem de fundo para a direita 47px (largura do #home 46px + 1px de separação)
  • #next {left:129px;width:43px;} - Posiciona à direita 129px (início do #prev é 63px + largura do #prev é 43px + espaços adicionais), largura 43px.
  • #next {background:url('navsprites.gif') -91px 0;} - Define a imagem de fundo para a direita 91px (largura do #home 46px + 1px de separação + largura do #prev 43px + 1px de separação)

Image Sprite - Efeito de Passagem do Mouse

Agora, vamos adicionar o efeito de passagem do mouse à lista de navegação.

Dica::hover selector pode ser usado para todos os elementos, não apenas para links.

Nossa nova imagem ("navsprites_hover.gif") contém três imagens de navegação e três imagens para o efeito de passagem do mouse:

Imagem de Navegação

Porque isso é uma imagem, não seis arquivos separados, então quando o usuário passar o mouse sobre a imagem,Não haverá atraso na carga.

Adicionamos apenas três linhas de código para implementar o efeito de passagem do mouse:

Exemplo

#home a:hover {
  background: url('navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
  background: url('navsprites_hover.gif') -47px -45px;
}
#next a:hover {
  background: url('navsprites_hover.gif') -91px -45px;
}

Experimente você mesmo

Explicação do exemplo:

#home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Nós atribuímos a mesma posição de fundo para todas as três imagens de sobreposição, apenas 45 pixels para baixo