悬停时更改背景图片

雷贾科

图像的比例是否与问题有关？

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

}

悬停时，它将重复多次图像。图片为2000 x 500像素。如何使该图像显示在单词的中间，而不重复显示。谢谢

这是图像悬停链接

html代码

<div id="menu"> 
<ul>
<li><a href="index.html"> Home</a></li>
<li> <a href="#"> lalal</a></li>
</ul>
</div>

阿里·卡里乔格鲁（Ali Carikcioglu）

您应该像这样设置文本参数：

网站的实时演示

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。