3

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

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

4 回答 4

2

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

您网站的现场演示

#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;
}
于 2013-08-14T09:51:48.763 回答
1

使用简写符号设置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 */
}
于 2013-08-14T09:43:00.423 回答
0

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

于 2013-08-14T09:45:15.810 回答
0

您只能更改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/

于 2013-08-14T09:49:00.357 回答