Question

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

#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像素。我怎样才能使这个图像显示在中间的单词后面而不重复。谢谢

这是图片悬停 link

html代码

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

Answer 1

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

LIVE DEMO OF YOUR WEBSITE

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

Answer 2

使用简写表示法

设置background-repeat和background-position属性

#menu a:hover {
   background: url(images/hover.png) center center no-repeat;
}

要允许看到整个图像，您必须修改li标记的CSS：

#menu li {
text-decoration: none;
display: inline;
font-size: 30px;
width: 50px;
padding-left: 30px;
height: 40px;
overflow: auto; /* Added this */
}

Answer 3

#menu a:hover { background: url(images/hover.png) no-repeat center center; }

Answer 4

您只能更改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");
}

这将使所有background个问题（repeat，position ...）变得更加突出，并且仅更改image。

这是一个有效的例子：

http://jsfiddle.net/B2Dbf/

在悬停时更改背景图像

4 个答案: