好的，我有一个功能可以在网站的背景中幻灯片放映背景。我希望导航链接透明，正文透明。不透明，因为没有颜色，透明，因为您可以在背景中看到幻灯片。
<script>
$(document).ready(function() {
function test() {
var count = $("img").size();
$("#background_images img").each(function(index) {
$(this).hide();
if (!--count)
$(this).delay(10000 * index).fadeIn(3000).delay(10000).fadeOut(1000, function() { test(); });
else
$(this).delay(10000 * index).fadeIn(3000).delay(10000).fadeOut(1000);
});
}
test();
});
-->
</script>
<style>
body, html{
margin:0;
padding: 0;
background: #000;
filter: alpha (opacity=50);
background-attachment: fixed;
width: 100%;
height: 100%;
}
html { overflow: hidden; filter: alpha (opacity=50); }
body { overflow: auto; filter: alpha (opacity=50);}
#background_images img{
position: absolute;
top:0;
display:none;
width: 99%;
z-index: 1;
}
#container { width: 1000px; background: #fff; margin: 0 auto; border-left: 1px solid #000; border-right: 1px solid #000; position: relative; z-index: 2; }
#header { width: inherit; height: 0px; background: url(../images/header.png) no-repeat; }
#navbar { width: inherit; height: 35px; background: url(../images/navbar.png) repeat-x; border-top: 1px solid; border-bottom: 1px solid; }
/* navbar ul content */
#navbar ul { list-style-type: none; padding: 0; margin: 0; }
#navbar li { display: inline; float: left; padding-left: 15px; margin: 0; }
#navbar li a { display: block; width: 50px; height: 26px; padding: 5px; color: #000; text-decoration: none; text-align: center; }
#navbar li a:hover { background: #fff; color: #666; }
#content { width: inherit; background: url(../images/shadow.png) repeat-x top #fff; }
/* content div's "cont" class */
#content .cont { padding: 50px; }
#footer { width: inherit; height: 150px; filter: alpha(opacity=100); -moz-opacity:.40;
opacity:.40;
text-align: center; padding-top: 100% }
/* footer div's "cont" class */
#footer .cont { padding: 5px; }
#footer .footlinks a { color: #fff; text-decoration: none; }
</style>
</head>
<body>
<div id='background_images'><img src='ocean.jpg' /><img src='sky.jpg' /></div>
<div id="container">
<div id="header">
</div><!-- #header -->
<div id="navbar">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic2.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Collections</span>
<span class="sdt_descr">Our work</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Formal</a>
<a href="#">Indigenous</a>
<a href="#">Vintage</a>
<a href="#">Retro</a>
<a href="#">Modern</a>
</div>
</li>
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic3.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Entice Ur Match</span>
<span class="sdt_descr">Customize Your Own.</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="../ArtemaDeuzz/navigationImages/pic4.png" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Be A Designer</span>
<span class="sdt_descr">Up For A Challenge</span>
</span>
</a>
</li>
<li>
<div id="center">
<a href="#" id="popUpAbout">
<script>
</script>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Who Are We</span>
<span class="sdt_descr">Matt & Na'il</span>
</span>
</a>
</div>
</li>
</ul>
</div><!-- #navbar -->
<div id="content">
<div class="cont">
</div><!-- #content .cont -->
</div><!-- #content -->
<div id="footer">
<div class="cont">
<p>© 2012. All Rights Reserved. Designed by Matthew Harding. ©</p>
<p class="footlinks"><a href="#">Home</a> | <a href="#">Test</a> | <a href="#">Test</a> | <a href="#">Test</a> | <a href="#">Test</a></p>
</div><!-- #footer .cont -->
</div><!-- #footer -->
</div><!-- #container -->
最佳答案
如果我理解您的问题，您是否尝试过 rgba，Look Here示例:
div {
background: rgba(200, 54, 54, 0.5);
}
最后一个参数是不透明度值。
我不能尝试你所有的代码，但看看这个测试，你可以从这个基础开始并做你需要的所有其他改变，它适用于你的 html 基础并且不透明工作，你只需要看看为什么在您的其余代码中进行更改。
body, html{
background-color:#ffaadd;
width:100%;
height:100%;
}
#background_images
{
width:100%;
height:100%;
border:1px solid green;
background-color:#aaffdd;
position:absolute;
}
#content
{ top:0px;
position:absolute;
border:1px solid red;
}
#navbar{
border:1px solid blue;
position:relative;
background: rgba(200, 54, 54, 0.3);
}
#footer { width: inherit; height: 150px; filter: alpha(opacity=100); -moz-opacity:.40;
opacity:.40;
text-align: center; padding-top: 100% }
/* footer div's "cont" class */
#footer .cont { padding: 5px; }
#footer .footlinks a { color: #fff; text-decoration: none; }
看看它是如何工作的HERE
关于javascript - 如何使网站的底部顶层对背景幻灯片透明？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16504939/