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

css sprite：div h2 title image with ul li

1 个答案: