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.

For Internet Explorer 8 :

filter:alpha(opacity=50)  

Here the value ranges from 0 to 100, full transparency to total opacity.

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

References

© 2011-2012 Xul.fr