하나의 이미지 파일을 사용하여 웹 사이트에 이미지/아이콘을 표시하는 방법

Question

웹 사이트에서 사용하는 모든 아이콘과 이미지를 저장하기 위해 하나의 이미지 png 파일을 사용하는 웹 사이트 만 보았습니다. 그러나 특정 이미지를 검사 할 때 다른 이미지는 볼 수 없습니다. 예를 들어, google.com 이미지의

는 예를 들어 파일 :

방법이 이미지 컷은 해당 웹 페이지에 사용할 수있는 각각의 이미지로 접합한다?

Answer 1

이미지는 "스프라이트"로 나뉩니다. 여기에 예제가 있습니다 http://www.spritecow.com/.

코드는 다음과 같이 진행됩니다

.sprite { 
    background: url('imgs/example.png') no-repeat -433px -51px; 
    width: 33px; 
    height: 33px; 
}