Implementando sprites de imagens em CSS
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; }