Container Transparency in HTML

As a beginner in web design, I’ve recently found out two ways to apply transparency to a container. First one makes the container and all its contents like image or text transparent.

<div style="filter:alpha(opacity=0.8); opacity:0.8;">
<p>Some contents here!</p>
</div> 

The filter:alpha(opacity=0.8) enables Internet Explorer 8 and Opera 9.x to make transparency.

While this certainly should work across well known browsers, there are times when you only need the actual container transparent but not its content. Accomplishing such requirement is easy. You only need to use a CSS property rgba which stands for RED-GREEN-BLUE-ALPHA spectrum. ALPHA value is where you would put your transparency value.

To use:

< div style="background-color: rgba ( 255, 0, 0, 0.5 )" >
<p>Some contents here!</p>
</div>

Notice the text in this demo does not appear transparent but rather opaque against it's background.