0

所以我正在尝试为我们媒体的底部链接制作一个精灵图像，但我没有让图像正确裁剪，我的错误在哪里？

CSS

.footer{
    position:absolute;
    bottom:0px;
    margin:5px;
    border:2px solid grey;
    width:200px;
    height:55px;
    overflow:hidden;
    display:block;
}

#twitter{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg') no-repeat;
    height:50px;
    width:50px;
    background-position: 0 0;
    display:block;
}

#twitter a:hover{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg');
    background-position: 0 50px;
}

HTML：

<div class="footer">
<a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" >
<img src="http://unifiedforunifat.com/redesign/resources/social.jpg" alt="U4U's Twitter"
/>
</a>
</div>
4

3 回答 3

0 
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .footer{
    position:absolute;
    bottom:0px;
    margin:5px;
    border:2px solid grey;
    height:55px;
    overflow:hidden;
    display:block;
   }

   #twitter{
     background:url('http://unifiedforunifat.com/redesign/resources/social.jpg') no-
     repeat;
     height:50px;
     width:50px;
     background-position: 0 0;
     display:block;
   }

   #twitter a:hover{
   background:url('http://unifiedforunifat.com/redesign/resources/social.jpg');
   background-position: 0 50px;
  }
  </style>
</head>
<body>
  <div class="footer">
    <a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" >
    <!--<img src="http://unifiedforunifat.com/redesign/resources/social.jpg" alt="U4U's     
    Twitter"-->
    <!--/>-->
       <div style="background:  
         url('http://unifiedforunifat.com/redesign/resources/social.jpg');width: 
         50px;height:50px; background-repeat: no-repeat"></div>
    </a>
  </div>
 </body>
 </html>
于 2013-08-12T20:06:20.457 回答
0

如果您只想在带有类的页脚中显示其中一张 twitter 图片，则需要将 .footer 宽度设置为 50px，而不是图像的完整 200px

于 2013-08-12T19:46:09.557 回答
0

我让它工作（虽然你可能不需要 !important 标签）：http: //jsfiddle.net/NV6zw/6/

<div class="footer">
<a href="https://twitter.com/unified4unifat" id="twitter" class="imglink" ></a>


.footer{

margin:5px;
border:2px solid grey;
width:200px;
height:55px;
overflow:hidden;
display:block;
}
#twitter{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg') no-repeat;
    height:50px;
    width:50px;
    background-position: 0 0;
    display:block;
}
#twitter:hover{
    background:url('http://unifiedforunifat.com/redesign/resources/social.jpg');
    background-position: -50px 0 !important;
}
于 2013-08-12T19:52:02.000 回答