PDA

View Full Version : opacity


blimp
12-21-2009, 11:00 AM
I'm using the Full Screen Background jQuery Plugin SUPERSIZED (http://www.buildinternet.com/project/supersized/)

Near the bottom of the screen, I've added a banner and would like to reduce the opacity by 0.5 and add text on top of it. However when I add the text, it also is effected by the opacity of the banner.

Any idea why?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">

<title>Supersized - Full Screen Background/Slideshow jQuery Plugin</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.core.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/effects.slide.js"></script>
<script type="text/javascript" src="supersized.2.0.js"></script>
<script type="text/javascript">
$(function(){
$.fn.supersized.options = {
startwidth: 640,
startheight: 480,
vertical_center: 0,
slideshow: 0,
navigation: 0,
transition: 0, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
pause_hover: 0,
slide_counter: 0,
slide_captions: 0,
slide_interval: 3000
};
$('#supersize').supersized();
});
</script>

<style type="text/css">
*{
margin:0;
padding:0;
}
a{
color:#8FC2FF;
text-decoration: none;
outline: none;
}
a:hover{
text-decoration: underline;
}
img{
border:none;
}
body {
overflow:hidden;/*Needed to eliminate scrollbars*/
background:#000;
}
#content{
margin:0px auto;
height:100px;
width:100%;
bottom:5%;
z-index: 3;
background:#262626 no-repeat 90%;
border-top:1px solid #000;
border-bottom:1px solid #4F4F4F;
position:absolute;
}
#contentframe{
overflow: hidden;
border-top:solid 1px #4F4F4F;
border-bottom:1px solid #000;
height: 100%;
text-align:left;
z-index: 3;
}
/*Supersized Stamp*/
.stamp{
float: right;
margin: 25px 20px 0 0;
}
/*Supersize Plugin Styles*/
#supersize{
position:fixed;
}
#supersize img, #supersize a{
height:100%;
width:100%;
position:absolute;
z-index: 0;
}
#supersize .prevslide, #supersize .prevslide img{
z-index: 1;
}
#supersize .activeslide, #supersize .activeslide img{
z-index: 2;
}
#menu {
height: 108px;
width: 100%;
z-index: 3;
background-color: #F60;
position: absolute;
bottom: 50px;
opacity:0.5;
padding-left: 200px;
}
#menu_text {
z-index: 10;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: #FFF;
}
</style>
</head>
<body>

<div id="supersize"><img src="images/home_image.JPG"/></a></div>
<div id="menu">
<div id="menu_text">
<ul>Home</ul>
<ul>Illumination</ul>
<ul>Music</ul>
<ul>People and Events</ul>
<ul>Shape and Form</ul>
<ul>Urban Landscape</ul>
<ul>Weddings</ul>
</div>
</div>
</div>

</body>
</html>