如何使网站的底部和顶部图层对背景幻灯片透明

How to make bottom top layer of website transparent to background slideshow?

本文关键字：图层 背景 幻灯片 透明 顶部 何使 网站 底部      更新时间：2023-09-26

好的，我有一个函数，在网站的背景中显示幻灯片背景。我希望导航链接是透明的，主体是透明的。不透明的意思是没有颜色，透明的意思是你可以在背景中看到幻灯片。

<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>&copy; 2012. All Rights Reserved. Designed by Matthew Harding. &copy;</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，看这里的例子:

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; }

相关文章：