使用精灵图像背景时，将文本链接到底部

Question

这是我的导航：

<ul>
    <li class="home"><a href="">Home</a></li>
    <li class="projects"><a href="">Projects</a></li>
    <li class="about"><a href="">About</a></li>
</ul>

我使用一个精灵图像，每个链接都有简单的悬停形状。

ul li a {
    background-repeat: no-repeat;
    background-image: url(../images/sprite.png);
    display: inline-block;
    outline: none;
    text-decoration: none;
    width: 51px;
    height: 51px;
    color: #a5a4a4;
}
ul li.home a {
    background-position: 0px 0px;
}
ul li.home a:hover  {
    background-position: 0px -51px;
}

我想将链接文本分解为每个51x51像素方块的底部。也许它需要增加a标签的高度，但精灵图像的另一部分不应该显示。

由于

Answer 1

设置padding-top: 51px;并将背景放在那里。如果精灵的其他部分正在显示，那么你应该让图像更加分离。