鼠标悬停时更改背景图像

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像素。如何使该图像显示在中间单词后面而不重复。谢谢。

这是图像悬停 链接 HTML代码。

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

- reidjako

---

我确实点击了实时演示，那时它是可以工作的，但当我添加和修改代码以适应您的需求时，它就无法工作了 :( - reidjako

Answer 1

你应该这样设置文本参数：

你的网站的演示

（Note: "LIVE DEMO OF YOUR WEBSITE" translated as "你的网站的演示")

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

- Ali Çarıkçıoğlu

---

还是没有成功，我觉得我的电脑坏了。 - reidjako

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 */
}

- Kevin Bowersox

---

这样做是不起作用的，因为它只显示照片的一小部分 :( - reidjako

@ridjako 这个 a 是不是在一个 li 里面？ - Kevin Bowersox

是的，它在一个li标签里面。我感觉这应该很简单，但是background-size: 100%;、background-repeat以及其他应该阻止它的东西都没有起作用... - reidjako

这是因为 li 元素被设置了特定的高度和宽度样式。 - Kevin Bowersox

我刚刚删除了它，但还是没有运气。 - reidjako

Answer 3

您可以仅更改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/

- m1k1o

---

这个代码最接近可行，但是图像在y轴上重复了3次，其高度为500px，而容器的高度只有50px。 - reidjako

我犯了个错误，将 bo-repeat 改为 no-repeat。 - m1k1o

我知道我修好了 :) - reidjako

Answer 4

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

#菜单 a:hover { 背景: url(images/hover.png) 不重复 居中 居中; }

- Octfx