悬停时更改背景图片 [英] Change background image on hover

问题描述

图像的比例与这个问题有什么关系？

  #menu {
 background：black; 
宽度：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; 
颜色：白色; 
 margin：auto 
 background-repeat：bo-repeat; 
 background-position：top center; 
 background-size：包含; 
 
 
  

悬停时，它会多次重复图像。该图像是2000 x 500像素。我怎样才能让这个图像显示在中间的单词后面，而不是重复。谢谢

这是图片悬停
link

html代码

  < div id =menu> 
< ul> 
< li>< a href =index.html>家庭及LT; / A>< /锂> 
< li> < a href =＃> LALAL< / A>< /锂> 
< / ul> 
< / div> 
  

解决方案

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

您网站的实时演示

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

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

This is the image hover link

the html code

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

解决方案

You should set the text parameters like this:

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

这篇关于悬停时更改背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！