html - 背景图像 Sprite 悬停不对齐

Question

我正在尝试通过这篇 CSS 技巧文章实现背景图像 Sprite 悬停效果: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

您的背景位置不太正确。您使用的图像 Sprite 是一两个像素。将 background-position 更改为以下内容:

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

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