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

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 に答える