17
Voglio sapere come trovare una posizione dell'immagine (coordinate) mentre si utilizza immagine sprite per lo styling.come trovare la posizione dei pixel dell'immagine da sprite image
A
risposta
44
Un altro modo più semplice per farlo è attraverso questo sito chiamato Sprite Cow. L'ho appena provato e fa andare le cose molto più velocemente.
0
Utilizzare un programma di modifica grafico come Gimp/Photoshop e scrivere le coordinate/posizione mentre si scrive il CSS.
+3
Dire "Devi solo sapere già la risposta" non è di grande aiuto. – Slobaum
+4
Sprite Cow dovrebbe essere la risposta su questo (sotto) –
3
È possibile utilizzare uno tool like this e ottenere posizioni di sfondo delle icone nello sprite.
È necessario prima caricare l'immagine, quindi selezionare un'icona dallo sprite. I CSS saranno generati, basta copiare il CSS generato e usarlo nella tua classe.
Altre opzioni sono
È necessario aprire l'immagine in un editor di immagini come Photoshop. Da lì puoi trovare la posizione X e Y in qualsiasi punto dell'immagine. Si prega di notare che a sinistra, in alto è 0,0. Ottieni la posizione xey e usalo in questo modo
background-position: -310px -123px;
Si prega di notare il segno "-" prima delle coordinate X e Y.
Inizia con
background-position: 1px 1px;
Utilizzare Firebug per modificare i valori al volo. Con il metodo di prova ed errore puoi trovare la posizione esatta.
+0
pittura MS con strumento di selezione, il cursore mostra le posizioni selezionate e le dimensioni selezionate - Es: x 266 y 3 quindi posizione sfondo: -266px -3px – Jay
-3
provare questo esempio mi ha aiutato molto quando ho provato la sprite sprite la prima volta.
<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>+2
Non penso che questo risponda alla domanda su come trovare il pixel posizione. –
0
ho trovato uno straordinario strumento online per generare il codice Sprite immagine CSS.
Link: http://GetSpriteXY.com/
Essa vi aiuterà nella generazione di pixel dell'immagine. Molto utile per me.
puoi renderlo più chiaro, vuoi trovare posizioni speciali programmaticamente? o solo le posizioni da aggiungere al css? in tal caso, che dire della misurazione? prova ed errore? – markus