Question

我试图使用CSS精灵，但第二个元素并没有正确。我不明白我做错了什么。我尝试将top属性设置为-45，这应该给我雅虎图形，但它是空白的。有什么问题？

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>

Answer 1

你的CSS应该是这样的：

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

注意：给出一个单位测量..在这种情况下是（px）并设置无重复。

Answer 2

你错过了给单位赋值，你的代码看起来应该遵循css规则

yahoolink {

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

}

你的CSS代码适用于谷歌是因为，如果你在0中给出值，一般写CSS规则你不需要提到那些单位。但如果你把数字而不是0，那么你必须提到那些单位。

我如何使用CSS精灵？

2 个答案: