0

次のようなメニューがあります。

<div id="header">
 <div id="nav">
  <ul>
   <li><a href="/home/"><img src="/images/icons/home.png" alt="Home" /></a></li>
  <li><a href="/tool/"><img src="/images/icons/tool.png" alt="Tool" /></a></li>
  <li><a href="/lists/"><img src="/images/icons/tags.png" alt="Lists" /></a></li>
 </ul>
</div>
</div>

ホバー/アクティブ状態の長方形の画像が欲しいです。問題は、画像のサイズに関係なく、常に縮小されることです。

私のアイコンは 30px x 30px です。私の背景画像は 69px x 34px です(ほぼ 30x30 を圧迫します)。

これらは私のCSSです：

#header {
    color      : #cccccc;
    font-size  : 1.0em;
    padding    : 0;
    min-height : 37px;
    background : #2d2d2d;
    vertical-align: middle;
}

#nav {
    font-size      : 1.1em;
    display        : inline;
}

#nav ul {
    padding        : 0;
    margin-left    : 270px;
    margin-bottom  : auto;
    margin-top     : auto;
    float          : left;
    vertical-align : middle;
    list-style     : none;
    position       : relative;
    display        : inline-table;
    height         : 37px;
    line-height    : 37px;
}

#nav li {
    float           : left;
    list-style      : none;
    padding         : 0px 35px 3px 0px;
    display         : inline;
    vertical-align  : middle;
}

 #nav li img {
    top: 100%;
    vertical-align  : middle;
}


#nav a:hover {
    background: url('../images/icons/overtop.png') no-repeat;
    border: 0;
    background-size: 100%;
    background-size: 69px 34px;
    width:69px;
    height:34px;
}

#nav a.active {
    background: url('../images/icons/backtop.png') no-repeat;
    border: 0;
    background-size: 100%; 
    background-size: 69px 34px;
    width:69px;
    height:34px;
}
4

2 に答える 2

2

一見して気づいたことがいくつかあります：

background-image:url('link/to/your/image.png') を使用してみてください。

background-size: 100% は冗長であるため、省略してみてください。

明確にするために（評判が低いためコメントを投稿できません）、アイコンの上の黒いバーなどの視覚的な手がかりを使用して、ユーザーが現在表示している/クリックしようとしているページをユーザーに示しようとしています。正しいですか？

編集

次のように、ホバー時にアンカー タグの代わりにリスト アイテムを参照してみてください。

li:hover {
    background: url('http://216.119.77.64/test/icons/overtop.png')  no-repeat;
    border: 0;
    background-size: 69px 34px;
}

サイズの問題は修正されますが、画像が背景の中央に配置されません。

于 2012-11-21T00:18:53.690 に答える
0

次のように試してみてください：

#nav a {
    border: 0;
    width:69px;
    height:34px;
}

#nav a:hover {
    background: url('../images/icons/overtop.png') no-repeat;
}

#nav a:active {
    background: url('../images/icons/backtop.png') no-repeat;
}
于 2012-11-21T00:19:36.050 に答える