jak znaleźć pozycję piksela obrazu z obrazu sprite'a

Question

Chcę dowiedzieć się, jak znaleźć pozycję obrazu (współrzędne) podczas korzystania z obrazu ikonki do stylizacji.

Answer 1

Innym, prostszym sposobem na zrobienie tego jest ta strona o nazwie Sprite Cow. Po prostu próbowałem go ostatnio i sprawia, że ​​wszystko idzie o wiele szybciej.

Answer 2

Użyj graficznego programu do edycji, takiego jak Gimp/Photoshop, i zapisuj współrzędne/położenie w dół podczas pisania CSS.

Answer 3

Możesz użyć tool like this i uzyskać pozycje tła ikon w ikonce.

Najpierw należy przesłać obraz, a następnie wybrać ikonę z ikonki. CSS zostanie wygenerowany, po prostu skopiuj wygenerowany CSS i użyj go w swojej klasie.

Inne opcje są

1. Trzeba otworzyć zdjęcie w edytorze graficznym jak Photoshop. Stamtąd możesz znaleźć pozycję X i Y w dowolnym miejscu obrazu. Należy pamiętać, że po lewej stronie na górze jest 0,0. Uzyskaj pozycję X i Y i użyj tego w ten sposób:

   background-position: -310px -123px;

Proszę zwrócić uwagę na znak "-" przed współrzędnymi X i Y.

1. Zacznij

   background-position: 1px 1px;

Użyj Firebug, aby zmodyfikować wartości w locie. Metodą prób i błędów można znaleźć dokładną pozycję.

Answer 4

Wypróbuj ten przykład bardzo mi pomógł, gdy pierwszy raz wypróbowałem ikonkę sprite.

<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>

Answer 5

Znalazłem jeden niesamowite narzędzie online do generowania obrazu Sprite kod CSS.

Link: http://GetSpriteXY.com/

Pomoże Ci w pokoleniu pikseli obrazu. Bardzo przydatne dla mnie.