1

わかりましたので、サイトの背景に背景をスライドショーする機能があります。ナビゲーション リンクを透明にし、本文を透明にしたい。色なしのように透明ではなく、バックグラウンドでスライドショーを見ることができるように透明です。

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

4

1 に答える 1