현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
이미지 스프라이트는 여러 개의 이미지들이 필요한 아주 많은 웹앱에서 사용됩니다. 이미지 각각을 별도의 파일로 포함시키는 대신, 이미지들을 하나의 파일로 만들어서 포함시키면 HTTP 리퀘스트 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.
실행
toolbtn 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.
.toolbtn {
background: url(myfile.png);
display: inline-block;
height: 20px;
width: 20px;
}
background 속성에 지정된 url() 값 다음에 x, y 2개 값으로 백그라운드의 위치를 추가 지정할 수 있습니다. 아니면 백그라운드의 위치를 background-position 속성으로도 지정할 수 있습니다. 예를 들면 다음과 같습니다.
#btn1 {
background-position: -20px 0px;
}
#btn2 {
background-position: -40px 0px;
}
이 CSS 는 ID 가 'btn1' 인 엘리먼트를 왼쪽으로 20 pixel 이동시키고 ID 가 'btn2' 인 엘리먼트를 왼쪽으로 40 pixel 이동시킬 것입니다 (앞서 보인 이미지 룰에 의해 두 엘리먼트에 toolbtn 클래스가 부여됐다고 가정합시다).
비슷하게, 우리는 마우스 호버(hover) 상태를 다음과 같이 지정할 수도 있습니다.
#btn:hover {
background-position: <pixels shifted right>px <pixels shifted down>px;
}