CSS로 이미지 스프라이트 구현하기

구현

toolbtn 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.

.toolbtn {
  background: url(myfile.png);
  display: inline-block;
  height: 20px;
  width: 20px;
}

ë°°ê²½ 이미지의 위치는 속성에 지정된 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 클래스가 부여됐다고 가정합시다).

비슷하게, 마우스 호버 상태를 만들 수도 있습니다.

#btn:hover {
  background-position: <pixels shifted right>px <pixels shifted down>px;
}

같이 보기

• Full working demo at CSS Tricks