Sprites CSS (Sprites)

A tecnologia CSS Sprites é um método para reduzir o número de solicitações de recursos de imagem HTTP ao combinar imagens em um único arquivo.

O que é um sprite de imagem

Sub-quadros são imagens bidimensionais, compostas por pequenas imagens combinadas em uma grande imagem sob os eixos X e Y definidos.

Para exibir uma única imagem dentro de uma imagem combinada, você pode usar CSS background-positionAtributo, define a posição exata da imagem a ser exibida.

Vantagens do uso de CSS Image Sprite

Páginas com muitos imagens, especialmente muitas imagens pequenas (por exemplo, ícones, botões, etc.) podem levar muito tempo para carregar e gerar várias solicitações de servidor.

Usar sprites de imagem em vez de imagens individuais reduz significativamente o número de solicitações HTTP que o navegador envia para o servidor, o que é muito eficaz para reduzir o tempo de carregamento da página da web e o desempenho geral do site.

Veja o exemplo a seguir, você verá uma diferença evidente. Quando você coloca o ponteiro do mouse em um ícone de navegador não Sprite pela primeira vez, uma imagem de ponta de interagir aparecerá após um período de tempo, isso porque a imagem de ponta de interagir é carregada do servidor quando o mouse está sobre ele, pois a imagem normal e a imagem de ponta de interagir são duas imagens diferentes.

Enquanto na versão Sprite, devido a todas as imagens estarem combinadas em uma única imagem, ao passar o mouse sobre ela, a imagem de ponta de suspensão é exibida imediatamente, resultando em um efeito de ponta de suspensão suave. Após o uso do CSS Sprite, o usuário pode acessar a imagem combinada, reduzindo o número de solicitações HTTP e o tamanho total do arquivo, aumentando a eficiência do acesso.

fazendo a sprite de imagem

através de10imagens individuais combinadas em uma única imagem (mySprite.png）para criar essa imagem sprite. Você pode usar qualquer ferramenta de edição de imagem preferida para criar sua própria sprite.

Exibir ícone a partir da sprite

Por fim, usando CSS, podemos exibir apenas uma parte da imagem sprite necessária.

Primeiro, criaremos a classe .sprite que carregará a imagem sprite. Isso é para evitar repetições, pois todos os itens compartilham a mesma imagem de fundo.

.sprite {
　　　　background:　url("images/mySprite.png")　no-repete;
}

Agora, devemos definir uma classe para cada item a ser exibido. Por exemplo, para exibir o ícone do Internet Explorer, o sprite de imagem será o código CSS.

.ie {
　　　　largura:　50px;　/*　Largura do ícone　*/
　　　　height:　50px;　/*　Altura do ícone　*/
　　　　display:　inline-block;　/*　Exibir ícone como bloco em linha　*/
　　　　background-position: 0　-200px;　/*　Icone de fundo de posição no sprite　*/
}

Agora, surge um problema, como obteremos esses valores de pixelsbackground-position？Vamos encontrar a resposta. O primeiro valor é a posiçãohorizontal，o segundo é a posiçãoposição vertical。Devido ao canto superior esquerdo do ícone do Internet Explorer tocar na margem esquerda, a distância horizontal entre ele e o ponto de partida (ou seja, o canto superior esquerdo da imagem sprite) é0e, devido a ela estar na5posição,Portanto, a distância vertical da imagem sprite ao ponto de partida é4 X 50px = 200px, pois a altura de cada ícone é50px。

Para exibir o ícone do Internet Explorer, devemos mover o canto superior esquerdo para o ponto de partida, ou seja, o canto superior esquerdo da imagem sprite (mySprite.png). Além disso, devido à distância vertical deste ícone200px，portanto, precisamos mover toda a imagem de fundo (mySprite.png) verticalmente para cima200px，isto requer que apliquemos o valor como número negativo-200px，porque um valor negativo o faria mover-se verticalmente para cima, enquanto um valor positivo o faria mover-se para baixo. No entanto, não há necessidade de deslocamento horizontal, pois o canto superior esquerdo do ícone do Internet Explorer não possui pixels.

使用CSS Image Sprite创建导航菜单

在上一节中，我们学习了如何显示图像精灵中的单个图标。这是使用图像精灵的最简单方法，现在我们将通过构建一个具有翻转效果的导航菜单向前迈出一步。

在这里，我们将使用相同的精灵图像（mySprite.png）创建导航菜单。

导航基础HTML

我们将从创建带有HTML 无序列表的导航菜单开始。

<ul　class="menu">
　　　　<li　class="firefox"><a　href="#">Firefox</a></li>
　　　　<li　class="chrome"><a　href="#">Chrome</a></li>
　　　　<li　class="ie"><a　href="#">Explorer</a></li>
　　　　<li　class="opera"><a　href="#">Opera</a></li>
　　　　<li　class="safari"><a　href="#">Safari</a></li>
</ul>

在导航上应用CSS

以下各节将介绍如何使用CSS将上面示例中给出的简单无序列表转换为基于恶意图像的导航。

Passos1：重置列表结构

默认情况下，HTML 无序列表显示为项目符号。我们需要通过将list-style-type属性设置为来删除默认的项目符号none。

ul.menu　{
　　　　list-style-type:　none;
}
ul.menu　li　{
　　　　padding:　5px;
　　　　font-size:　16px;
　　　　font-family:　"Trebuchet　MS",　Arial,　sans-serif;
}

Passos2：set　common　properties　for　each　link

In　this　step,　we　will　set　all　the　common　CSS　properties　that　all　links　will　share.　For　example:color，background-image，display，paddingetc.

ul.menu　li　a　{
　　　　height:　50px;
　　　　line-height:　50px;
　　　　display:　inline-block;
　　　　padding-left:　60px;　/*　To　sift　text　off　the　background-image　*/
　　　　color:　#3E789F;
　　　　background:　url("images/mySprite.png")　no-repete;　/*　Como todos os links compartilham o mesmo fundo-image　*/
}

Passos3: definir o estado padrão de cada link

Agora,我们必须 definir uma classe para cada item do menu, porque cada item dentro do sprite de imagem tembackground-position. Por exemplo, o ícone Firefox está no ponto de partida do sprite de imagem, ou seja, no canto superior esquerdo, portanto, não é necessário mover a imagem de fundo. Portanto, neste caso, a posição vertical e horizontal do fundo será 0. Da mesma forma, você pode definir a posição de fundo para outros ícones dentro do sprite de imagem.

ul.menu li.firefox a {
　　　　background-position: 0 0;
}
ul.menu li.chrome a {
　　　　background-position: 0　-100px;
}
ul.menu li.ie a {
　　　　background-position: 0　-200px;
}
ul.menu li.safari a {
　　　　background-position: 0　-300px;
}
ul.menu li.opera a {
　　　　background-position: 0　-400px;
}

Passos4: adicionar o estado de sobreposição do link

Adicionar o estado de sobreposição é o mesmo princípio que adicionar o link acima. Basta mover o canto superior esquerdo para o ponto de partida do sprite de imagem (ou seja, o canto superior esquerdo), como fizemos acima. Você podebackground-positionPode ser calculado simplesmente usando a seguinte fórmula:

A posição vertical do estado de sobreposição = a posição vertical do estado normal - 50px

Como a imagem de sobreposição do mouse está abaixo do estado padrão, a altura de cada ícone é igual a50px. O estado de sobreposição do ícone também não precisa de deslocamento horizontal, pois não há pixels antes do canto superior esquerdo do ícone.

ul.menu li.firefox a:hover {
　　　　background-position: 0　-50px;
}
ul.menu li.chrome a:hover {
　　　　background-position: 0　-150px;
}
ul.menu li.ie a:hover {
　　　　background-position: 0　-250px;
}
ul.menu li.safari a:hover {
　　　　background-position: 0　-350px;
}
ul.menu li.opera a:hover {
　　　　background-position: 0　-450px;
}

Concluído! Após combinar todo o processo, este é nosso código HTML e CSS final: