Question

我查看了大量有类似问题的帖子，但我无法弄清楚我的问题。请有人帮忙，这让我疯了。

以下代码适用于我的网站导航。我希望背景是图像而不仅仅是背景颜色。我还想在悬停时更改背景图片。正如我们的猫鼬朋友会说的......简单！......但不适合我。

<div class="sub-menu" id="sub-menu">
<ul>
<li><a class="on" href="#" title=" You Are Here ">&raquo; Overview</a></li>
<li><a href="graduates-endorsements.html" title=" What Clients Say About The Programme ">Endorsements</a></li>
<li><a href="graduates-programme.html" title=" Programme Focus, Programme Leader and Venues ">The Detail</a></li>
<li><a href="graduates-funding.html" title=" Delegate Sponsored Places and Busaries ">Funding</a></li>
<li><a href="graduates-apply.html" title=" Online application Form ">Apply Online</a></li>
<li><a class="end" href="graduates-terms.html" title=" Terms &amp; Conditions ">Terms</a></li>
</ul>
</div>


div.sub-menu { position: relative; width: 920px; height: 40px; padding: 0; margin: 0;  border-top: solid 1px #FFFFFF; }
#sub-menu ul { list-style: none; padding: 0; margin: 0; }
#sub-menu li { float: left; margin: 0; }
#sub-menu li a { padding: 0 30px; width: 93px; height: 40px; line-height: 36px; text-align: center; float: left; display: block; color: #FFFFFF; text-decoration: none; background-color: #555555; border-right: solid 1px #858585; }
#sub-menu li a:hover { color: #050505; background-color: #f3b607; }
#sub-menu li a.on { background-color: #555555; color: #FBAF5D; cursor: default; }
#sub-menu li a.end { width: 89px; }
#sub-menu li a.end-on { text-align: center; float: left; display: block; color: #FBAF5D; text-decoration: none; border-right: none; }


/* Hide from IE5-Mac \*/
#sub-menu li a{ float: none }
/* End hide */

#sub-menu { font-weight: normal; font-size: 14px; font-family: verdana; }

谢谢，非常感谢您的帮助。

Answer 1

在您的问题主题中，您说您希望将背景图像添加到“li”标记中，但根据您显示的代码，您已经为“a”标记提供了背景。

您可以将背景图片和颜色放在任何标签“li”和“a”

中

EG。背景：＃00ff00 url（'smiley.gif'）无重复固定中心; 详情请参考： http://www.w3schools.com/cssref/css3_pr_background.asp

如果你想要悬停效果，请在锚“a”标签上实现它。因为像ie6这样的旧浏览器没有内置支持li悬停效果。

使用以下模式。

a{
   background:   url('img1') no-repeat fixed center; 
}
a:hover{
   background:   url('img2') no-repeat fixed center; 
}

希望它对你有所帮助。

李背景图像不显示

1 个答案: