一般情况下导航菜单的背景图片都是比较有规则的，但是平时我们也会遇到很多背景图片形状不规则导航条（比如但鼠标移上的时候，背景图片不规则，本例只讨论此种类型）,如下图所示：
（图一）
当鼠标移上去的时候背景变成 红色 箭头，也许，咋一看， 觉得 这个效果并没有什么特别的地方，但是仔细看看我画上去的绿色框框部分，就会发现每 一块 都是接在一起的不会断开的；如果说按照 普通方法 来做，那么实现的可能是下图所示的效果：
（图二）
即是块与块之间是断开的。
复制代码
代码如下:
<!DOCTY PE ht ML P ub LIC "-//W3C//DTD XHTML 1.0 Trans IT ional//EN" "http://www.w3. org /TR/xhtml1/DTD/xhtml1 -t ransitional.dtd">
<html XM lns="http://www.w3.org/1999/xhtml">
<head>
< ;m eta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/ jq uery.js"></script>
<!-- wbg解决ie6下的背景 勿动！！！-->
<!--[if IE 6]>
<script src="js/ie_png.js" mce_src="js/ie_png.js">
</script>
<script type="text/javascript">
DD_belatedPNG.fix('.p rev ious, img ');
</script>
<![endif]-->
<style type="text/css">
body{
font- Size: 12px;
font-f ami ly:Arial, Helvetica, sans -s erif;
}
body,div,dl,dt,dd,ul,ol,li, h1 ,h2,h3,h4,h5,h6, PR e,form,fieldset,input,textarea,p, blockquote ,th,td {
m arg in:0;
padding:0;
list-style:none;
}
body img{
border:none;
}
a{
color: # 000;
border:0;
text-decoration:none;
}
a:hover{
color:#f00;
text-decoration:none;
}
#warp{
mar gin :20px auto;
width: 960px;
}
body{
background:url(img/bj. jpg ) no-repeat center top #090909;
}
.nav{
background:url(img/nav_bj.png) right no-repeat;
_background:url(img/nav_bj.gif) right no-repeat;
h ei ght:47px;
width:638px;
}
.nav ul li{
float:left;
margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
dis play :inline;
width:104px;
}
.nav ul li a{
display:block;
color:#FFFFFF;
padding:7px 0px;
_padding:5px 0px 6px;
width:104px;
float:left;
text-align:center;
font-f am ily:Microsoft YaHei !important;
}
.nav ul li a span{
display:block;
}
.nav ul li a:hover{
background:url(img/a_hover.png) no-repeat;
_background:url(img/a_hover.gif) no-repeat;
color:#fff;
}
.nav ul .home a:hover{
background:url(img/home_hover.png) 7px center no-repeat;
_background:url(img/home_hover.gif) 7px center no-repeat;
}
</style>
<title></title>
</head>
<body>
<div id="warp">
<div class="nav">
<ul>
<li class="home"><a hr ef=""><span>Home</span>首页</a></li>
<li><a href=""><span>About</span>关于九弘</a></li>
<li><a href=""><span>Serve</span>服务项目</a></li>
<li><a href=""><span>Case</span> 活动 案例</a></li>
<li><a href=""><span>Information</span> 公司 动态</a></li>
<li><a href=""><span>Partners</span>合作伙伴</a></li>
<li><a href=""><span>Contact</span>联系方式</a></li>
</ul>
</div>
</div>
</body>
</html>
在这个效果的实现 过程中 最关键的地方就是把[li]的margin值左右两边设为负数，然后把[li]和]a[的 宽 度设成一样，这样]a[的宽度就是固定的了，而]li[左右两边因为有margin，所以会缩小。
总结
以上是 为你收集整理的 不规则背景墙 CSS实现背景图片不规则的导航菜单 全部内容，希望文章能够帮你解决 不规则背景墙 CSS实现背景图片不规则的导航菜单 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于不规则背景墙 CSS实现背景图片不规则的导航菜单的详细内容...