Html 悬停时更改背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18228248/
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
Change background image on hover
提问by reidjako
Would the proportions of the image have anything to do with the problem?
图像的比例是否与问题有关？
#menu {
background: black;
width: 100%;
height: 45px;
}
#menu ul {
text-decoration: none;
list-style-type: none;
}
#menu li {
text-decoration: none;
display: inline;
font-size: 30px;
padding-left: 30px;
}
#menu a:hover {
background-image: url(images/hover.png);
}
#menu a {
text-decoration: none;
color: white;
margin: auto
background-repeat: bo-repeat;
background-position: top center;
background-size: contain;
}
On hover it repeats the images multiple times. The image is 2000 x 500 px. How can I make it so that this image is displayed behind the word in the middle and not repeat. Thank you
在悬停时，它会多次重复图像。图像为 2000 x 500 像素。我怎样才能使这个图像显示在中间的单词后面而不是重复。谢谢
This is the image hover link
这是图像悬停 链接
the html code
html代码
<div id="menu">
<ul>
<li><a href="index.html"> Home</a></li>
<li> <a href="#"> lalal</a></li>
</ul>
</div>
回答by Ali ?ar?k??o?lu
You should set the text parameters like this:
您应该像这样设置文本参数：
#menu ul li a:hover
{
background-image: url(http://img.mynet.com/ha2/tayyip.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
回答by Kevin Bowersox
Set the background-repeatand background-positionproperties using the shorthand notation
使用速记符号设置background-repeat和background-position属性
#menu a:hover {
background: url(images/hover.png) center center no-repeat;
}
To allow the whole image to be seen you must modify the CSS for the litag:
要允许看到整个图像，您必须修改li标签的 CSS ：
#menu li {
text-decoration: none;
display: inline;
font-size: 30px;
width: 50px;
padding-left: 30px;
height: 40px;
overflow: auto; /* Added this */
}
回答by Octfx
#menu a:hover {
background: url(images/hover.png) no-repeat center center;
}
#menu a:hover {
background: url(images/hover.png) no-repeat center center;
}
回答by M1K1O
You can change only background-imageinstead of all backgroundattributes.
您只能更改background-image而不是所有background属性。
#menu a {
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
background-image: url("images/no-hover.png");
}
#menu a:hover {
background-image: url("images/hover.png");
}
This will ingore all backgroundproberties (repeat, position...) and change only image.
这将background忽略所有探测器 ( repeat, position...) 并且仅更改image.
This is working example:
这是工作示例：
