How to make bottom top layer of website transparent to background slideshow?
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>© 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 -->
1 answers
solution1
0 2013-05-12 07:54:31
If i understood your question, have you tried rgba, Look Here example:
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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to make top and bottom of div transparent
How to make slideshow of images that layer
How to make a background slideshow in jquery?
How to make the background a slideshow in javascript
Fading top and bottom edges of a semi transparent and scrollable div with a background video
Slideshow Background of the body of the website
How can i make a sticky navbar appear transparent at the bottom of a hero before it becomes fixed at the top?
How to make chart background transparent
How to make canvas background transparent
How to make the canvas background transparent
Related Tags