div 그룹이 포함 된 이미지 용 CSS 스프라이트 시트

Question

여러 상자의 스프라이트 시트를 사용하려고 할 때 분명히 이미지를 여러 번 호출합니다 (스프라이트 시트를 쓸모 없게 만들거나 실제로 더 나 빠지게 만듭니다). (이것은 내가 약 9 상자를 가지고, 단지 샘플입니다)

#phone 
{ 
    background-image:url('../img/Mountain.png'); 
    background-position: 0px 0; 
    background-repeat:no-repeat; 
} 
#mobile 
{ 

    background-image:url('../img/Mountain.png'); 
    background-position: 0px -134px; 
    background-repeat:no-repeat; 
} 

Answer 1

.live-box{ 
    background-image:url('../img/Mountain.png'); 
    background-repeat:no-repeat; 
} 

#phone 
{ 
    background-position: 0px 0; 
} 
#mobile 
{ 
    background-position: 0px -134px; 
} 

이

작동합니다 : 그냥 내가

<div class="live-box-outer"> 
       <div class="live-box contact-highlight" id="phone"> 

        <div class="overlay" style="display: none"> 
         <h2> 
          Telephone Number</h2> 
         <div class="arrow"> 
         </div> 
        </div> 
        <span>Our #</span> 
       </div> 
      </div> 
      <div class="live-box-outer"> 
       <div class="live-box" id="mobile"> 
        <div class="overlay" style="display: none"> 
         <h2> 
          text mobile 
          functions</h2> 
         <div class="arrow"> 
         </div> 
        </div> 
        <span>Mobile Sites</span> 
       </div> 
      </div> 

그리고 내 스타일 이미지를 한 번 호출이보다 효율적으로 만들 수있는 방법 궁금