O ' sprites de imagem ” é uma técnica na qual é criada uma imagem grande que consiste em várias imagens únicas. E qualquer parte da imagem grande pode ser exibida em relação aos requisitos de design. Ele ajuda os desenvolvedores a criar elementos visualmente atraentes sem problemas. Sprites de imagem podem ser usados para ícones, botões e outros elementos gráficos. Este artigo demonstra o procedimento passo a passo do uso de sprites de imagem em CSS.
Como usar eu Mago Sprites em CSS?
Em CSS, os desenvolvedores utilizam sprites de imagem para minimizar/reduzir o tempo de carregamento de uma página da web. Isso ajuda a reduzir as solicitações HTTP, garante um carregamento mais rápido e melhora o fator de experiência do usuário. Por exemplo, visite o exemplo abaixo:
Exemplo: Usando Sprite de Imagem em Item de Lista
Neste exemplo, uma lista ordenada é criada e em cada item da lista, parte da imagem do sprite é exibida na tela.
Pré-requisito:
Para obter a imagem específica do sprite de imagem, as dimensões do sprite de imagem que está sendo utilizado são particularmente importantes. Por exemplo, a imagem que tem uma dimensão de “ 937×156 ” é mostrado abaixo:
Siga as etapas abaixo para exibir alguma parte da imagem exibida acima:
Etapa 1: criação de itens de lista
A lista não ordenada é gerada na página da Web, conforme o trecho de código abaixo:
< ul >Vazio: < que eu ia = 'vazio' > que >
Metade: < que eu ia = 'metade' > que >
Completo: < que eu ia = 'completo' > que >
ul >
A descrição do trecho de código acima:
-
- Primeiro, use o “
' marcação. - Em seguida, atribua os IDs de “ vazio ”, “ metade ' e ' completo ” para três itens da lista. Estes são utilizados posteriormente para exibir parte da imagem maior.
- Primeiro, use o “
Passo 2: Exibindo a Primeira Imagem
Para exibir o coração vazio na página da web, que é a primeira imagem no sprite de imagem. Use o ' vazio ” id e insira o seguinte código:
#vazio {largura: 157px;
altura: 150px;
plano de fundo: url ( .. / sprite.jpg ) 0 0 ;
}
Na linha de códigos acima:
-
- Primeiro, defina o “ largura ' e ' altura ” da imagem que o desenvolvedor deseja exibir na página da web.
- Essas propriedades são atribuídas aos valores de “ 157px ' e ' 150px ” de acordo com o exemplo fornecido acima, mas podem variar em relação às imagens com dimensões diferentes.
- Em seguida, forneça o caminho do “ sprite ” imagem para o “ fundo ' propriedade. Agora, defina a direção de “ 0 ' e ' 0 ” e exibe a primeira parte do sprite da imagem.
Após a execução da linha de código acima, a página da Web ficará assim:
O instantâneo acima mostra que a primeira imagem do sprite de imagem é exibida na página da web.
Etapa 3: exibindo a imagem do meio e da última imagem
Para exibir o meio e a última parte da imagem do sprite da imagem, insira as seguintes propriedades CSS:
#metade {largura: 157px;
altura: 150px;
plano de fundo: url ( .. / sprite.jpg ) -462px 0px
}
#completo {
largura: 157px;
altura: 150px;
plano de fundo: url ( .. / sprite.jpg ) -770px 0px
}
A descrição do trecho de código acima:
-
- Primeiro, selecione a opção “ metade ” id e insira as mesmas propriedades CSS utilizadas na etapa acima.
- Para exibir a imagem do meio do sprite de imagem, altere a direção ou atribua o preenchimento do lado esquerdo. Por exemplo, a direção da esquerda é definida como “ negativo 462px ”.
- Da mesma forma, exiba a última imagem definindo a direção da esquerda para “ -770px ”.
Após a execução das propriedades CSS acima, a página da Web aparece assim:
O instantâneo acima mostra que as três imagens do sprite de imagem foram exibidas na página da web.
Conclusão
O ' sprites de imagem ” é uma única imagem grande composta de várias imagens menores, assim como o recurso de colagem. E qualquer parte da imagem grande que representa uma imagem menor pode ser exibida. De acordo com os requisitos usando o “ fundo ” propriedade fornecida pelo CSS. Para exibir a imagem específica do sprite de imagem, primeiro defina a largura e a altura da imagem. Depois disso, utilize os valores de direção para exibir apenas a parte da imagem do sprite da imagem.