css sprite：div h2與ul li的標題圖像

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元素應該接收精靈，而不是錨。下面是相關變化的開始： （也處於forked fiddle）

HTML：

 <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; }