CSS opacity property and transparency effects

The global property of transparency is defined in CSS 3, however it is implemented in browsers for some time.

CSS 3 also defines a transparency parameter in the code of RGBA (Red, Green, Blue, Alpha) colors, but the property can apply opacity to the contents of a tag.

Example with and without transparency ...

Without transparency	With transparency

In the second case, two images were overlaid as explained in the demo mysterious image.

Syntax

Standard code :

opacity: 0.5

The value is 0 for content completely transparent and therefore invisible, and 1 for fully opaque content, with decimals to intermediate values.

Code of the demonstration

HTML code:

<div class="box" style="width:230px;height:200px">
<img class="imgback" src="images/imgback.jpg" width="230px" height="200px">
<img class="imgtop" src="images/imgtop.jpg" width="230px" height="200px">
</div>

CSS code:

.box
{
  position:relative;
}
.imgtop, .imgback
{
  position:absolute;
  top:0;
  left:0;
}
.imgtop
{
  z-index:10;
  opacity:0.5;
  filter:alpha(opacity=50);	
}

To superimpose the images, they are given an absolute position in a container which must itself have a relative position.
Z-index:10 places the image in question over the other image.

See also

• Z-index. The superposition of content used with transparency.

References

• Transparency: The "opacity" property. W3C CSS 3 specification.