Cross-browser semi-transparent Div with opaque content

http://blog.adamoliver.net/tutorials/cross-browser-transparent-div-with-opaque-content/

View demo

Download demo

HTML:

< div id= “column_1” class= “container” >

<div class=”overlay”></div>

<div class=”content”>

<h2>Some Opaque Content</h2>

</div>

</div>

CSS:

body {

background: #ff0000;

color:#fff;

}

#column_1 {

position: relative;

float: left;

width: 500px; /* remember to set a width */

}

.overlay{

position: absolute;

top: 0; /* These positions makes sure that the overlay */

bottom: 0;  /* will cover the entire parent */

left: 0;

width: 100%;

background: #000;

opacity: 0.65;

-moz-opacity: 0.65; /* older Gecko-based browsers */

filter:alpha(opacity=65); /* For IE6&7 */

}

==========================================

See example of semi-transparent navigation overlays the Flash banner header:

http://daihoiquocteynhaduocvn.com/

Below is the code:
/* Start———————-Header elements */

#header-container {
margin: 0 auto;
width: 836px;
height: 270px;
position:relative;
padding-top:30px;
}

#header {
width: 836px;
height: 270px;
}

#site-title {
display: none;
}

/* End———————-Header elements */


/* Start———————-Navigation */
#navigation {
position:absolute;
top:32px;
right:2px;
z-index:1;
padding:0;
width: 204px;
}

#page-nav {
width: 204px;
height:266px;
background: url(‘images/menu_bg.gif’) top right repeat-y;
opacity:0.94;
-moz-opacity:0.94;
filter:alpha(opacity=94);
}

* html #navigation #page-nav {
height: expression(document.getElementById(“navigation”).offsetHeight);
/* Lets use the * html hack so only IE6 reads the rule. This expression makes sure that the overlay (#page-nav) fills the container (#navigation). The overlay (#page-nav) is now at 94% opacity and fills the container (#navigation) which includes full opacity content. */
}
Advertisements
%d bloggers like this: