CSS tecnologia de imagem em mosaico

Dividir imagem

Achatar a imagem é uma coleção de imagens individuais.

Há muitas imagens na página podem levar um longo tempo para carregar e gera várias solicitações do servidor.

Use uma divisão servidor de imagem irá reduzir o número de pedidos e economizar largura de banda.

imagem Split - exemplo simples

Em vez de usar três imagens separadas, como usar esta imagem única ( "img_navsprites.gif"):

Com CSS, podemos mostrar apenas uma parte da imagem que precisamos.

No exemplo a seguir mostra uma porção do CSS especificado "img_navsprites.gif" imagem:

exemplos de análise:

• <Img class = "casa" src = "img_trans.gif" /> - porque não pode estar vazio, atributo src define apenas uma pequena imagem transparente. A imagem exibida será especificamos em imagens de fundo CSS
• Width: 46px; height: 44px; - definida parte da imagem que nós usamos
• background: url (img_navsprites.gif) 0 0; - imagem de fundo personalizada e sua posição (0px esquerda, superior 0px)

Isso é feito usando uma imagem dividir a maneira mais fácil, e agora nós usar links e pairar efeitos.

Achatar a imagem - para criar uma lista de navegação

Queremos usar a imagem de divisão ( "img_navsprites.gif"), para criar uma lista de navegação.

Nós vamos usar uma lista HTML, porque pode ser ligado, e também suporta uma imagem de fundo:

exemplos de análise:

• #navlist {position: relative;} - posição é definido o posicionamento relativo, permitir o posicionamento absoluto dentro
• li #navlist {margin: 0; padding: 0; list-style: none; position: absolute; top: 0;} - margem e padding é definido como 0, o estilo de lista é excluído, todos os itens da lista são o posicionamento absoluto
• #navlist li, #navlist a {height: 44px; display: block;} - a altura de todas as imagens é 44px

Agora, cada posicionamento parte específica e estilo:

• #home {left: 0px; width: 46px;} - posicionado à esquerda, ea maneira como a largura da imagem é 46px
• #home {background: url (img_navsprites.gif) 0 0;} - imagem de fundo personalizada e sua posição (0px esquerda, superior 0px)
• #prev {left: 63px; width: 43px;} - na 63px direito de posicionamento (#home 46px largura + algum espaço extra entre os itens), uma largura de 43px.
• #prev {background: url ( 'img_navsprites.gif') -47px 0;} - imagem de fundo personalizada na 47px direita (#home divisores de largura 46px + 1px)
• #next {left: 129px; width: 43px;} - ao 129px posicionamento direita (#prev 63px + largura #prev é 43px + espaço restante), a largura é de 43px.
• #next {background: url ( 'img_navsprites.gif') no-repeat -91px 0;} - imagem de fundo personalizada na 91px direita (#home 46px + 1px Linha Divisória + # prev largura 43px + 1px divisores)

Achatar a imagem s - pairar efeito

Agora, queremos que a nossa lista de navegação para adicionar um efeito hover.

	: O seletor de efeito hover para passar o mouse sobre a tela elemento selector de ponta :: foco pode ser aplicada a todos os elementos.

A nova imagem ( "img_navsprites_hover.gif") contém três imagens de navegação e três imagens:

Porque esta é uma única imagem, em vez de seis arquivo de imagem separado quando um usuário permanece na imagem não vai atrasar o carregamento.

Nós adicionar efeitos de foco adicionar apenas três linhas de código:

exemplos de análise:

• Uma vez que o item da lista contém um link, podemos usar a: hover pseudo-classe
• #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, mas, em seguida, para baixo 45px cada