CSS 스프라이트 : ul li이있는 div h2 제목 이미지

Question

내 웹 페이지에 SpriteMe를 사용하고 있으며 아래 코드가 있습니다. 문제는 내부에 단일 이미지 대신 전체 스프라이트 이미지를 표시한다는 것입니다.

<div class="white_box"> 
    <div class="white_box_top_JS" style="background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); border: 2px solid red; background-position: -279.5px -10px; "> 
     <h2>Job Seekers</h2> 
     <ul> 
      <li> 
       <a href="/?user_group_id=JobSeeker" class="web_des" style="background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); background-position: -638px -6px; ">Register</a> 
      </li> 
     </ul> 
    </div> 
</div> 

나는 <ul> Sprite Issue을 읽고 따라 갔지만 얻을 수는 없습니다.

http://jsfiddle.net/6TaQt/30/

Answer 1

그것은 가능한 인라인 스타일을 멀리하는 것이 가장 좋습니다. 또한 li 요소는 앵커가 아닌 스프라이트를 받아야합니다.

HTML (또한 forked fiddle에) : 여기에 관련 변경의 시작이다

 <ul> 
     <li id="register"> 
      <a href="/?user_group_id=JobSeeker" class="web_des">Register</a> 
     </li> 
     <li id="post"> 
      <a href="/add-listing/?listing_type_id=Resume" class="web_dev">Post resumes</a> 
     </li> 
     <li id="find"> 
      <a href="/find-jobs/" class="seo" >Find jobs</a> 
     </li> 
     <li id="get"> 
      <a href="/job-alerts/?action=new" class="cms">Get jobs by email</a> 
     </li> 
    </ul> 

CSS :

#register { width: 40px; 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); 
    background-position: -1315px -6px; } 

#post { width: 40px; 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png) ; 
    background-position: -1360px -6px; } 

#find { width: 40px; 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); 
    background-position: -685px -5px; } 

#get { width: 40px; 
    background-image: url(http://www.jaredhirsch.com/coolrunnings/public_images/75a3bcd651/spriteme2.png); 
    background-position: -544px -6px; }