Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

Sprites de imagens são utilizados em diversas aplicações web onde várias imagens são usadas. Ao invés de incluir cada arquivo de imagem separadamente, é mais amigável com a memória e largura de banda enviar tudo como uma única imagem, diminuindo o número de pedidos em HTTP.

Nota: Quando usando HTTP/2, é mais amigável com a largura de banda usar vários pequenos pedidos.

Implementação

Suponha que uma imagem é dada a cada item com a classe toolbtn:

.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

A posição do plano de fundo pode ser adicionada tanto com dois valores x, y depois de url() em background , ou como background-position . Por exemplo:

#btn1 {
  background-position: -20px 0px;
}

#btn2 {
  background-position: -40px 0px;
}

Isso vai mover o elemento com a ID 'btn1' 20 pixels para a esquerda e o elemento com a ID 'btn2' 40 pixels para a esquerda (presumindo que ambos tem a classe toolbtn atribuída e estão sendo afetados pela regra da imagem acima).

De forma similar, você pode criar um efeito de hover com:

#btn:hover {
  background-position: <pixels para direita>px <pixels para baixo>px;
}

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: williamxavierdecastro
Última atualização por: williamxavierdecastro,