 |
|||
|
|||
|
What You Will Need
· Basic HTML Knowledge
· Basic CSS Knowledge |
Here's a quick tutorial for creating a transparent layer between your content div and the background div. An example of this is displayed as an image lower on this page.
Make a Transparent Div
For this to work, you'll need 3 divs. The first div is your wrapper – it will contain all of the other divs. You can also style the wrapper div to be positioned wherever you want it to be on the page. For the sake of this quick tutorial, I didn't specify the position of the wrapper.
The next layer, is the transparent later (.box_trans) which is placed inside of .box_wrapper. Our positioning is in reference to the .box_wrapper element. In this example, I set the transparent layer to the bottom with a height of 50px to function as a caption. You could place it anywhere you want within the .box_wrapper div.
To create the transparency effect we simpy add opacity to the style of the .box_trans. Depending on which browsers you would like to support, you may also want to add the other opacity filters (mentioned in the sample code).
Finally, our content layer is styled in reference to the .box_wrapper layer. Since the .box_trans layer is closed before we start our .box_content layer, it will not effect it's opacity. Here's an example image, and the example code:
HTML Code:
<div class="box_trans"></div>
<div class="box_content">
<p>This is a Union Jack flag close up</p>
</div>
</div>
CSS Code:
position:absolute;
width:400px;
height:300px;
background:url(bg_unionjack.png); /* you can also use background-color: for testing */
}
.box_trans {
position:absolute;
bottom:0px;
width:400px;
height:50px;
background-color:#ffffff;
opacity:.5; /* opacity is supported in most newer browsers only */
-moz-opacity: 0.5; /* older mozilla browsers */
filter: alpha(opacity=50); /* older ie browsers */
}
.box_content {
position:absolute;
font-family:Tahoma;
font-size:14px;
text-align:center;
bottom:0px;
width:400px;
height:50px;
color:#ffffff;
}
