Como encontrar a posição da imagem do pixel da imagem sprite

StackOverflow https://stackoverflow.com/questions/1452961

  •  12-09-2019
  •  | 
  •  

Pergunta

Eu quero saber como encontrar um Posição da imagem(coordenadas) ao usar imagem sprite para estilo.

Foi útil?

Solução

Outra maneira mais fácil de fazer isso é através deste site chamado Vaca sprite. Eu apenas tentei recentemente, e isso faz as coisas passarem muito mais rápido.

Outras dicas

Você pode usar um ferramenta como esta e obtenha posições de fundo dos ícones no sprite.

Você precisa primeiro enviar sua imagem e selecionar um ícone no sprite. O CSS será gerado, basta copiar o CSS gerado e usá -lo em sua classe. (Isenção de isenção: eu fiz isso algum tempo atrás)

enter image description here

enter image description here

Outras opções são

  1. Você precisa abrir a imagem em um editor de imagens como o Photoshop. A partir daí, você pode encontrar a posição X e Y em qualquer lugar da imagem. Observe que à esquerda, o topo é 0,0. Obtenha a posição X e Y e use assim

    Posição de fundo: -310px -123px;

Observe o sinal "-" antes das coordenadas x e y.

  1. Começar com

    Posição de fundo: 1px 1px;

Use Firebug para modificar os valores em tempo real. Por método de tentativa e erro, você pode encontrar a posição exata.

Encontrei uma incrível ferramenta online para gerar código CSS da Sprite Image.

Link : https://getspritexy.netlify.com/

Isso o ajudará na geração de pixels de imagem. Muito útil para mim.

Use um programa de edição gráfica, como o GIMP/Photoshop, e escreva as coordenadas/posições ao escrever o CSS.

Tente este exemplo me ajudou muito quando tentei o Sprite Conclamar a primeira vez.

<style type="text/css">
#avocado{
width: 104px;
height: 95px;
background: url(http://2.bp.blogspot.com/-gwRqiyz9X8k/VM0vhBscDsI/AAAAAAAACVA/hITMUs6BjOg/s1600/foods-that-are-toxic-to-dogs.jpg) -110px -121px;
}
</style>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top