문제
찾는 방법을 알고 싶습니다 이미지 위치(좌표) 사용 중 스프라이트 이미지 스타일링을 위해.
해결책
이 작업을 수행하는 또 다른 방법은이 사이트를 통해 스프라이트 암소. 나는 최근에 그것을 시도했고, 그것은 훨씬 더 빨리 나아가게한다.
다른 팁
당신은 a를 사용할 수 있습니다 이와 같은 도구 스프라이트에서 아이콘의 배경 위치를 얻습니다.
먼저 이미지를 업로드 한 다음 스프라이트에서 아이콘을 선택해야합니다. CSS가 생성되고 생성 된 CSS를 복사하여 클래스에서 사용합니다. (면책 조항 : 나는 이것을 언젠가 다시 만들었습니다)
다른 옵션입니다
Photoshop과 같은 이미지 편집기에서 이미지를 열어야합니다. 거기에서 이미지의 어느 곳에서나 X와 Y 위치를 찾을 수 있습니다. 왼쪽, 상단은 0,0입니다. X와 Y 위치를 얻고 이렇게 사용하십시오.
배경 위치 : -310px -123px;
X와 Y 코디네이션의 "-"표시에 주목하십시오.
시작합니다
배경 위치 : 1px 1px;
Firebug를 사용하여 즉시 값을 수정하십시오. 시행 착오 방법으로 정확한 위치를 찾을 수 있습니다.
Sprite Image CSS 코드를 생성하는 놀라운 온라인 도구 중 하나를 찾았습니다.
링크 : https://getspritexy.netlify.com/
이미지 픽셀 생성에 도움이 될 것입니다. 나에게 매우 유용합니다.
gimp/photoshop과 같은 그래픽 편집 프로그램을 사용하고 CSS를 작성할 때 좌표/위치를 적어 두십시오.
이 예제를 시도해 보면 시도했을 때 많은 도움이되었습니다. 스프라이트 첫 번째로 물건을 채우십시오.
<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>