背景图像精灵悬停不对齐

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/

背景图像精灵悬停不对齐

background image sprite hover not aligning

html

css