悬停/活动菜单上的 CSS 背景图像缩小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13484146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS background image on hover / active menu shrank
提问by Diego Sarmiento
I have a menu like this:
我有一个这样的菜单：
<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>
I would like a rectangle image on hover / active state. The problem is that no matter what size my images are, they always shrank.
我想要一个悬停/活动状态的矩形图像。问题是无论我的图像有多大，它们总是缩小。
My icons are 30px x 30px. My background images are 69px x 34px(they squeeze almost 30x30).
我的图标是 30px x 30px。我的背景图片是 69px x 34px（它们几乎压缩了 30x30）。
These are my CSS:
这些是我的 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;
}
回答by Jonathan Moriarty
Just some things I did notice on first glance:
乍一看，我确实注意到了一些事情：
You should try using background-image:url('link/to/your/image.png').
您应该尝试使用 background-image:url('link/to/your/image.png')。
You could also try omitting the background-size: 100% because it is redundant.
您也可以尝试省略 background-size: 100% 因为它是多余的。
Just for clarification (I can't post comments due to my reputation being low) you are trying to indicate to the user what page they are currently on/about to click with a visual clue such as a black bar over the icon, correct?
只是为了澄清（由于我的声誉很低，我无法发表评论）您试图通过视觉线索（例如图标上的黑条）向用户指示他们当前所在/即将点击的页面，对吗？
EDIT
编辑
Try referencing the list items instead of the anchor tag on hover such as:
尝试在悬停时引用列表项而不是锚标记，例如：
li:hover {
background: url('http://216.119.77.64/test/icons/overtop.png') no-repeat;
border: 0;
background-size: 69px 34px;
}
It fixes the size issue, but the images are not centered in the background.
它修复了尺寸问题，但图像不在背景中居中。
回答by Alexandre Lavoie
Give it a try like this :
试试这样：
#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;
}
