0

Web ページに 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/

4

1 に答える 1

0

可能な限りインライン スタイルを使用しないことをお勧めします。さらに、li 要素はアンカーではなくスプライトを受け取る必要があります。関連する変更の開始は次のとおりです:(フォークされたフィドルでも)

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; }
于 2012-10-26T10:18:55.920 に答える