스프라이트 이미지에서 이미지의 픽셀 위치를 찾는 방법

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

  •  12-09-2019
  •  | 
  •  

문제

찾는 방법을 알고 싶습니다 이미지 위치(좌표) 사용 중 스프라이트 이미지 스타일링을 위해.

도움이 되었습니까?

해결책

이 작업을 수행하는 또 다른 방법은이 사이트를 통해 스프라이트 암소. 나는 최근에 그것을 시도했고, 그것은 훨씬 더 빨리 나아가게한다.

다른 팁

당신은 a를 사용할 수 있습니다 이와 같은 도구 스프라이트에서 아이콘의 배경 위치를 얻습니다.

먼저 이미지를 업로드 한 다음 스프라이트에서 아이콘을 선택해야합니다. CSS가 생성되고 생성 된 CSS를 복사하여 클래스에서 사용합니다. (면책 조항 : 나는 이것을 언젠가 다시 만들었습니다)

enter image description here

enter image description here

다른 옵션입니다

  1. Photoshop과 같은 이미지 편집기에서 이미지를 열어야합니다. 거기에서 이미지의 어느 곳에서나 X와 Y 위치를 찾을 수 있습니다. 왼쪽, 상단은 0,0입니다. X와 Y 위치를 얻고 이렇게 사용하십시오.

    배경 위치 : -310px -123px;

X와 Y 코디네이션의 "-"표시에 주목하십시오.

  1. 시작합니다

    배경 위치 : 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>

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top