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

Question

Ok so I have a function that slideshow a background in the background of the site . 好的，我有一个可以在网站背景中幻灯片显示背景的功能。 I want the Navigation Links to be transparent and the body to be transparent. 我希望导航链接是透明的，正文是透明的。 Not transparent as in no color , transparent as in you can see the slideshows in the background. 不透明如无色，如您可以在背景中看到幻灯片一样透明。

<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

If i understood your question, have you tried rgba, Look Here example: 如果我理解您的问题，您是否尝试过rgba，请看此处示例：

div {
   background: rgba(200, 54, 54, 0.5); 
}

the last parameter is the opacity value. 最后一个参数是不透明度值。

I can't try all your code but look at this test, you can start with this base and do all the other changes you need, its working for the base of your html and with opacity working, you only have to see why in the rest of your code is making it change. 我无法尝试所有代码，但请看一下此测试，您可以从此基础开始并进行所有其他需要的更改，它可以为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; }

Look how its working HERE 看看这里的运作方式

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

问题描述

1 个解决方案

解决方案1
0 2013-05-12 07:54:31

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

问题描述

1 个解决方案

解决方案1 0 2013-05-12 07:54:31

解决方案1
0 2013-05-12 07:54:31