Question

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

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>

Answer 1

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

Answer 2

我这样做了（尽管你可能不需要！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;
}

Answer 3

<!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>

精灵图像没有在CSS中裁剪

3 个答案: