如何使用CSS sprites？

我試圖使用CSS精靈，但第二個元素沒有出來的權利。我不明白我做錯了什麼。我嘗試將top屬性設置爲-45，這應該會給我雅虎圖形，但它顯示爲空白。哪裏不對？如何使用CSS sprites？

enter image description here

樣機

enter image description here

CSS

#googlelink { 
    width: 102px; 
    height: 44px; 
    background: url(/_/img/openidlogos.png) 0 0; 
} 

#yahoolink { 
    width: 102px; 
    height: 44px; 
    background: url(/_/img/openidlogos.png) 0 -45; 
}

如果我使用上面的代碼，然後谷歌的鏈接呈現確定，但接下來沒有在那裏我試圖抵消到應繪製的區域。

enter image description here

<!DOCTYPE html> 
<html dir="ltr" lang="en-IN" class="js"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <meta charset="UTF-8"> 
    <meta name="description" 
      content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}"> 
    <meta name="googlebot" content="noarchive"> 
    {% if cursor %} 
    <link rel="next" href="/delhi/?o=2"> 
    {% endif %} 
    <link rel="canonical" href="/q"> 

    <title></title> 
    <!-- CSS INCLUDES: --> 

    <link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css"> 

    <link href="/static/css/common_in2.css?{{VERSION}}" rel="stylesheet" type="text/css"> 
    <!-- HEADEXTRAS: --> 

    <link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon"> 
    <!-- 
     <link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon"> 
     <link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png"> 
     <link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png"> 
     <link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon"> 
      <link href="https://plus.google.com/123122342342345" rel="publisher">--> 

    <!-- JAVASCRIPTS: --> 
    <script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="/static/js/common.min.js"></script> 
    <script type="text/javascript" src="/static/js/arrays_v2.js"></script> 
    <script type="text/javascript" src="/static/js/searchbox.min.js"></script> 

    <script type="text/javascript"><!-- 

    function cities(obj) { 


     if (obj.value == '3') { 

      //undisplay cities options municipality_control2 

      document.getElementById('municipality_control').style.display = 'none' 

     } else { 

      $('#cities').load('/cities?regionId=' + obj.value); 

     } 

     document.getElementById("citiess").className = "selectbox munics "; 

    } 

$(function() { 
    $("#searchtext").focus(); 
}); 
    //--> 
    </script> 
</head> 
<body> 
{% include "kooltopbar.html" %} 


<div id="wrapper"> 
{% if request.host == "www.koolbusiness.com" %} 

    <h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &amp; 
     selling in india</h1> 
{% endif %} 


    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <!-- v2 --> 
    <ins class="adsbygoogle" 
     style="display:inline-block;width:728px;height:15px" 
     data-ad-client="ca-pub-7211665888260307" 
     data-ad-slot="9119838994"></ins> 
    <script> 
     (adsbygoogle = window.adsbygoogle || []).push({}); 
    </script> 

    <div id="border1"></div> 

<section id="searchbox"> 

    <form id="search_form" action="." method="post"> 
<table><tr><td> 
LOG IN</td><td> 
     <input placeholder="YOUR E-MAIL OR USERNAME" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text" 
      value="{{query}}"></td><td> <input placeholder="YOUR PASSWORD" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text" 
      value="{{query}}"> 
</td><td> 
    <input id="searchbutton" value="Login" class="button" type="submit"></td> 
</tr> 

    <tr><td> 
    </td><td>YOUR E-MAIL</td><td> PASSWORD</td><td> 

    </tr> 
    <tr><td> 
CREATE ACCOUNT 
    </td><td><input placeholder="YOUR E-MAIL OR USERNAME" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text" 
      value="{{query}}"></td><td> <input placeholder="YOUR PASSWORD" name="email" size="20" id="searchtext" title="email" class="placeholder" type="text" 
      value="{{query}}"> 
</td><td> 
    <input id="searchbutton" value="Login" class="button" type="submit"></td> 
</tr> <tr><td> 
    </td><td>YOUR E-MAIL</td><td>DESIRED PASSWORD</td><td> 

    </tr> <tr><td> 
    OR LOG IN WITH </td><td><img id="googlelink"> </td><td><img id="yahoolink"> facebook</td><td></td></tr> 

</table> 

</form> 


</section> 



</div> 


</body> 
</html>

來源

2015-04-02 Niklas Rosencrantz

嘿...你應該給單位（px）你的精靈。 ex：background：url（/ _/img/openidlogos.png）0 -45px; – 2015-04-02 11:25:46

這是一種家庭作業項目嗎？ – fontophilic 2015-04-02 12:49:36

@fontophilic號碼這是一個真實的網站。 – 2015-04-02 13:09:40

你的CSS應該是這樣的：

#yahoolink { 
    width: 102px; 
    height: 44px; 
    background: url(/_/img/openidlogos.png) no-repeat 0 -45px; 
}

注：measure..in這種情況下是（PX）給一個單元，並設置不重複。

來源

2015-04-02 11:26:59

你錯過給予單元的值，你的代碼看起來應該像下面的CSS規則

yahoolink {

width: 102px; 
height: 44px; 
background: url(/_/img/openidlogos.png) 0 -45px;

}

你的CSS代碼正在爲谷歌是因爲，當在一般情況下寫CSS規則，如果你給0的值你不需要提及單位。但如果你把數字而不是0，那麼你必須提到這些單位。

來源

2015-04-02 11:31:28

如何使用CSS sprites？

回答

相關問題