0

これは私のナビゲーションです：

<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ませんが、スプライト画像の別の部分は表示しないでください。

ありがとう

4

1 に答える 1

1

padding-top: 51px;そこに背景を設定して配置します。スプライトの他の部分が表示されている場合は、画像をより分離する必要があります。

于 2013-01-14T01:15:00.063 に答える