背景图像精灵悬停不对齐

Question

我正在尝试使用此CSS-tricks文章实现背景图片精灵悬停效果：http://css-tricks.com/fade-image-within-sprite/

我的问题是在下列情况下图像不完全对齐：

HTML：

<ul class="contact">
    <li class="phone"><a class="bg_hover" href="#">Call me</a>

    </li>
    <li class="twitter"><a class="bg_hover" href="#">Follow me on Twitter</a>

    </li>
    <li class="email"><a class="bg_hover" href="#">Email me</a>

    </li>
</ul>

CSS：

.bg_hover {
    position: relative;
}
.bg_hover:after {
    content:"";
    background-image: inherit;
    background-position: bottom left;
    background-repeat: no-repeat;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    transition: 1s;
}
.bg_hover:hover:after {
    opacity: 1;
}
.contact {
    margin-left: 60px;
}
.contact li {
    float:left;
    margin: 30px 15px 0 0;
    font-style: italic;
}
.contact li a {
    padding: 3px 0 0 25px;
    height: 18px;
    background-repeat: no-repeat;
    display: block;
}
.contact .phone a {
    background-image: url(http://i.imgur.com/9d9hdiL.png);
}
.contact .email a {
    background-image: url(http://i.imgur.com/9d9hdiL.png);
}
.contact .twitter a {
    background-image: url(http://i.imgur.com/9d9hdiL.png);
}
li {
    list-style: none;
}

jsfiddle：http://jsfiddle.net/47Lngd4t/2/

你能告诉我问题出在哪里吗？

Answer 1

如果您正在谈论此处的效果http://take.ms/a6ar2，只需将line-height例如10px添加到.contact li a选择器

还有其他一些方法可以实现：

• 您可以更改<a>元素的填充
• 您可以更改图片的background-position

Answer 2

我改变了

.contact li a {
padding: 3px 0 0 25px;
...
}

到

.contact li a {
padding: 2px 0 0 25px;
...
}

所以，从3px到2px。似乎对我而言。

Answer 3

你的背景位置不太对劲。您使用的图像精灵是一个或两个像素。将background-position更改为以下内容：

.bg_hover:after {
    background-position: 0 -21px;
}

在此处查看演示：http://jsfiddle.net/AndyMardell/47Lngd4t/3/