1

ロールオーバー時に背景画像を使用しようとしているテキスト リンクがあります (link.gif透明でlinkhover.gif、ロールオーバー画像です)。

以下のコードは、ポジショニングが機能していないことを除いて機能しています。

.navlink {
background:transparent url('graphics/link.gif') center top no-repeat;
height:70px;}

.navlink:hover {
background-image: url('graphics/linkhover.gif');}
4

2 に答える 2

0

このように、背景をフルサイズにしてみてください

.navlink {
    background: url('graphics/link.gif');
    height:70px;
}

.navlink:hover {
    background: url('graphics/linkhover.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100%;
}

デモ

の周りに親要素がある場合は、配置して削除する.navlinkだけで、比例したままになります。比率を無視して親を埋めるだけにしたい場合は、両方を置くことができますheight:100%height:70px;height:100%width:100%

編集

navlinks がすべてであることがわかったので、の代わりに親の背景が変更されるため、<a>持つことはできません（理由はわかりません）background-attachment: fixednavlink

更新されたコード

.navlink {
    text-align:center;
    background: url('graphics/link.gif');
    background-repeat: no-repeat; /* This applies to :hover as well */
    background-position: center; /* This applies to :hover as well */
    text-decoration: none; /* To remove the underline */
}
.navlink:hover {
    background: url('graphics/linkhover.gif');
}

コメントで提供したサイトの構造に基づいてデモを更新しました

次回質問を書くときは、関連する HTML を含める必要があります。これにより、問題の解決がはるかに簡単になります。

編集2

いくつか遊んだ後、これを使用してあなたが望むようにあなたのサイトを手に入れたと思います：

.navlink {
    padding-top:30px;
    text-align:center;
    background: url('graphics/link.gif');
    text-decoration: none;
}
.navlink:hover {
    background: url('graphics/linkhover.gif');
    background-position: center -55px;
    background-repeat:repeat-y;/*This is optional, taking it out makes it repeat*/
    text-decoration: none; 
}
于 2013-08-24T22:35:14.737 に答える
0

スプライトを作成し、画像を 1 つのファイルに並べて配置し、:hover で背景位置を調整する必要があります。CSS は次のようになります。

.navlink {
    background-image: url('image');
    background-position: top left;
}

.navlink:hover {
   background-position: top right;
}

CSS3 トランジションを追加すると、クールな効果が得られます。画像はロールオーバー状態にスライドします。

于 2013-08-24T22:27:58.787 に答える