Question

好的，我有一个功能，可以在网站的背景中幻灯片显示背景。我希望导航链接是透明的，身体是透明的。不透明，没有颜色，透明，就像你可以看到背景中的幻灯片一样。

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

Answer 1

如果我理解你的问题，你试过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

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

1 个答案: