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

これを実行して動作するようになりました（ただし、おそらく !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 に答える