悬停/事件菜单上的 CSS 背景图像缩小

Question

我有一个这样的菜单:

<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;
}

Answer 1

只是第一眼我注意到的一些事情:

你应该尝试使用 background-image:url('link/to/your/image.png').

您也可以尝试省略 background-size: 100%，因为它是多余的。

只是为了澄清(由于我的声誉很低，我不能发表评论)你试图通过视觉线索向用户指示他们当前在/将要点击的页面，例如图标上的黑条，对吗？

编辑

尝试在悬停时引用列表项而不是 anchor 标记，例如:

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

它解决了尺寸问题，但图像没有在背景中居中。