悬停只适用于图像的一半

Question

我对编码很陌生，所以我不知道出了什么问题。。。我有一个带有悬停的社交媒体图标，它应该显示为粉红色，而不是白色，我使用了第二张图片，但图片只显示在下半部分。有什么想法吗？

CCS:

a.twitter:hover {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/twitter1.png');
    background-position: 5px -20px;
    background-repeat: no-repeat;
}

HTML:

<div class="social"><a class="twitter" href="http://twitter.com/" title="Twitter" alt="twitter"><center><img src="http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/wtwitter.png" hspace="5"></a>

Answer 1

更改background-position属性。

background-position: xpox  ypos;

Answer 2

当尝试基于悬停更改图像时，使非悬停状态也使用背景图像会有所帮助。这样你只需要让它在悬停时改变背景图像。

请参阅以下JSFiddle：http://jsfiddle.net/dfhsps7d/

<style>
.social {
    background-color:grey;
}
a.twitter {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/wtwitter.png');
    display:block;
    width: 30px;
    height:30px;
}
a.twitter:hover {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/twitter1.png');
    background-repeat: no-repeat;
}
</style>
<div class="social">
    <a class="twitter" href="http://twitter.com/" title="Twitter" alt="twitter"></a>
</div>

请注意，第一个.social类纯粹是为了便于查看白色图标。