不透明内容透明背景嵌套透明背景不透明内容。css求大神帮忙看看哪里错了,只能显示第一个li的文字,后面三个都看不到。
.navigation{width:100%; height:75px; text-align:center; margin:0 auto; margin-top:6px;}
.nav{ background:#fff; position:relative; overflow:hidden; height:75px; opacity:0.3;-moz-opacity:0.3; -webkit-opacity:0.3;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30); z-index:-2; }
.naviga{ z-index:2; margin-top:-75px; height:75px; position:relative; }
.nav_li ul{ width:880px; margin:0 auto;}
.navtext{ width:880px; margin:0 auto;}
.nav_li{ height:55px;}
.nav_li li{ position:relative; overflow:hidden; opacity:0.5;-moz-opacity:0.5;-webkit-opacity:0.5; height:50px;filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); z-index:-1;margin-right:45px; float:left; background:#fff; }/***背景透明***/
.nav_li ul li a{ font-size:36px; line-height:50px; color:#fff; padding:4px 10px; font-weight:600; }
.navtext{ height:55px; position:inherit; margin-top:-55px;}
.navtext li{position:relative; margin-right:45px; float:left; z-index:4;margin-top:-55px;}
.navtext ul li a{font-size:36px; line-height:50px; color:#fff; padding:4px 10px; font-weight:600; }
html css 透明背景 不透明内容
<div class="navigation">
<div class="nav"></div>
<div class="naviga">
<div class="nav_li">
<ul>
<li><a href="#">世界呐喊</a></li>
<li><a href="#">世界呐喊</a></li>
<li><a href="#">世界呐喊</a></li>
<li><a href="#">世界呐喊</a></li>
</ul>
</div>
<div class="navtext">
<ul>
<li><a href="#">世界呐喊</a></li>
<li><a href="#">世界呐喊</a></li>
<li><a href="#">世界呐喊</a></li>
<li><a href="#">世界呐喊</a></li>
</ul>
</div>
</div>
</div>