文章/答案/技术大牛

发布

社区首页 >问答首页 >雪碧图像没有在css中剪切。

问雪碧图像没有在css中剪切。
EN

Stack Overflow用户

提问于 2013-08-12 19:38:54

回答 3查看 136关注 0票数 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>

sprite

html

css

image

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-08-12 19:52:02

我做到了(尽管您可能不需要！重要的标记)：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;
}

票数 0

Stack Overflow用户

发布于 2013-08-12 19:46:09

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

票数 0

Stack Overflow用户

发布于 2013-08-12 20:06:20

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/18195327

复制

相似问题

问雪碧图像没有在css中剪切。
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问雪碧图像没有在css中剪切。EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问雪碧图像没有在css中剪切。
EN