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
#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;}
#home{background:url('img_navsprites.gif') 0 0;}
#prev{left:63px;width:43px;}
#prev{background:url('img_navsprites.gif') -47px 0;}
#next{left:129px;width:43px;}
#next{background:url('img_navsprites.gif') -91px 0;}
tente »
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
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}
tente »
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