0

ナビゲーションバーを作成中です。私は以前にここに来て、そのアイテムの再編成とコーディングを手伝ってもらいました。すべてが素晴らしく見え、うまくいくように見えましたが、各画像のサイズ変更の代わりに次のコードを使用すると、画像の高さの X% と画像の幅の Y% しか表示されませんでした。何が問題なのかわかりません。

CSS:

#navbar a.newr:link { background-image: url('newr.png'); display: block; width: 5%; height: 2%; }

#navbar a.newr:hover { background-image: url('newrhover.png'); display: block; width: 5%; height: 2%; }

私のウェブサイトでどのように見えるかを参照して、私が何を意味するかを確認してください. 私の他のナビゲーションバーの質問も参照してください。

ありがとうございました。

4

2 に答える 2

0

背景画像として行ったので、幅と高さの属性は画像ではなく div にのみ適用されます。

2 つのオプションがあります。

  • 寸法に合わせて画像のサイズを変更します
  • ページに画像を配置し、ホバー効果に JavaScript を使用します
于 2012-05-21T04:43:53.473 に答える
0

背景画像のサイズは変更されません。それらはフル サイズで表示され、コンテナーが小さい場合はクリップされます。

できること:

  • 最善の方法は、画像のサイズをターゲット サイズに変更することです。

  • ハック的なアプローチは、絶対位置の<img>タグを背景として使用し、<span>テキストを前景として使用することです。

    <div class="hasBg">
    <img>
    <span>text</span>
<div>

.hasBg{
    position:relative;
}
//will autofit depending on how span stretches the container
.hasBg img{
    position:absolute;
    top: 0;
    bottom: 0;
    left: 0;
}

.hasBg span{
    position:absolute;
}

  • ネイティブの新しい機能は、新しい CSS3 を使用することbackground-sizeです。しかし、これはクロスブラウザではありません

于 2012-05-21T04:41:23.523 に答える