Sprites imagem
Um sprite de imagem é uma coleção de imagens colocadas em uma única imagem.
Uma página web com muitas imagens pode levar um longo tempo para carregar e gera várias solicitações do servidor.
Usando sprites imagem vai reduzir o número de solicitações do servidor e economizar largura de banda.
Sprites imagem - Exemplo Simples
Em vez de usar três imagens separadas, usamos esta imagem única ("img_navsprites.gif") :
Com CSS, podemos mostrar apenas a parte da imagem que precisamos.
No exemplo a seguir a CSS especifica qual parte do "img_navsprites.gif" imagem para mostrar:
Exemplo
#home
{
width: 46px;
height: 44px;
background: url(img_navsprites.gif) 0 0;
} Tente você mesmo " Exemplo explicou:
-
<img id="home" src="img_trans.gif">- define apenas uma pequena imagem transparente porque o atributo src não pode estar vazio. A imagem exibida será a imagem de fundo que especificar no CSS -
width: 46px; height: 44px;width: 46px; height: 44px;- define a parte da imagem que deseja usar -
background: url(img_navsprites.gif) 0 0;- Define a imagem de fundo e sua posição (0px esquerda, superior 0px)
Esta é a maneira mais fácil de usar sprites de imagem, agora queremos expandi-la usando links e pairar efeitos.
Sprites imagem - Criar uma lista de navegação
Queremos usar a imagem do sprite ("img_navsprites.gif") para criar uma lista de navegação.
Vamos usar uma lista de HTML, porque pode ser um link e também suporta uma imagem 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;
}
Tente você mesmo " Exemplo explicou:
- #navlist {position:relative;} - posição fica definida em relação ao permitir o posicionamento absoluto dentro dele
- #navlist li {margin:0;padding:0;list-style:none;position:absolute;top:0;} - margem e padding é definido como 0, list-style é removido e todos os itens da lista são absolutos posicionado
- #navlist li, #navlist a {height:44px;display:block;} - a altura de todas as imagens são 44px
Agora começam a posição e estilo para cada parte específica:
- #home {left:0px;width:46px;} - Posicionado todo o caminho para a esquerda, e a largura da imagem é 46px
- #home {background:url(img_navsprites.gif) 0 0;} - Define a imagem de fundo e sua posição (0px esquerda, superior 0px)
- #prev {left:63px;width:43px;} - 63px para a direita (#home 46px largura + algum espaço extra entre os itens) Posicionado, ea largura é de 43px.
- #prev {background:url('img_navsprites.gif') -47px 0;} - Define o 47px imagem de fundo para a direita (#home largura 46px + 1px linha divisória)
- #next {left:129px;width:43px;} - Posicionado 129px para a direita (início da #prev é largura #prev 63px 43px + + espaço extra), ea largura é de 43px.
- #next {background:url('img_navsprites.gif') -91px 0;} - Define o 91px imagem de fundo para a direita (#home largura 46px + 1px linha de largura #prev divisor + 43px + 1px linha divisória)
Sprites imagem - Hover Effect
Agora queremos adicionar um efeito hover para a nossa lista de navegação.
 | Dica: A :hover seletor pode ser usado em todos os elementos, não apenas em links. |
|---|
A nova imagem ("img_navsprites_hover.gif") contém três imagens de navegação e três imagens a utilizar para efeitos de foco:
Porque esta é uma única imagem, e não seis arquivos separados, não haveránenhum atraso de carregamento quando o usuário passa o mouse sobre a imagem.
Nós só adicionar três linhas de código para adicionar o efeito hover:
Exemplo
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px
-45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px
-45px;
} Tente você mesmo " Exemplo explicou:
- #home a:hover {background: transparent url('img_navsprites_hover.gif') 0 -45px;} - Para todas as três imagens em foco que especificar a mesma posição de fundo, apenas a 45px ainda mais para baixo