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％，因为它是多余的。

只是为了澄清（由于我的声誉很低，我无法发表评论）您试图向用户表明他们当前正在/将要点击的页面是否有视觉线索，例如图标上的黑条，对吗？

修改的

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

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

它修复了尺寸问题，但图像不在后台居中。

Answer 2

尝试这样：

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

在悬停/活动菜单上的CSS背景图像缩小

2 个答案: