CSS 스프라이트 - 복수 호출

Question

CSS에서 필요한 모든 인스턴스에 대해 스프라이트 이미지를 호출하는 것은 잘못 되었습니까? 브라우저는 어떻게 이것을 처리합니까? 한 번만로드됩니까?

예 :

.box1{ background: url('../img/sprite.png') 0 0 no-repeat; } 
.box2{ background: url('../img/sprite.png') 0 -20px no-repeat; } 
.btn{ background: url('../img/sprite.png') -100px -60px no-repeat; } 

난 당신이 한 번 스프라이트를 호출하고 단지 배경의 위치를 ​​변경하는 몇 가지 예제를 보았다.

예 :

#myDiv{ background: url('../img/sprite.png') 0 0 no-repeat; } 
#myDiv .box2{ background-position: 0 -20px; } 

Answer 1

그 기술 문제있는 유일한 방법은 당신의 CSS는 그것이 필요 이상 (바이트 측면에서)이 큰하게 중복 코드를 가질 것입니다.

배경 이미지를 두 번 이상로드하지 않습니다. 개발자 도구를 열고 네트워크 탭을보고이를 확인할 수 있습니다.

Answer 2

배경 이미지는 한 번만 다운로드됩니다. 바로

클릭이 요소

을 검사 페이지에 어딘가에 클릭

1. 탐색 웹 페이지
2. 에 :
   는 다음을 수행하여 자원이 크롬으로 다운로드되고 있는지 확인할 수 있습니다이 테스트하려면 네트워크 탭
3. 에
4. 클릭 새로 고침 페이지

로드 된 모든 리소스가이 목록에 표시됩니다.

.box1, .box2, .btn{ background-image: url('../img/sprite.png') } 
.box1{ background-position: 0 0 no-repeat; } 
.box2{ background-position: 0 -20px no-repeat; } 
.btn{ background-position: -100px -60px no-repeat; }