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 ...
In the second case, two images were overlaid as explained in the demo mysterious image.
Standard code :
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 :
Here the value ranges from 0 to 100, full transparency to total opacity.
Code of the demonstration
<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">
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.
- Z-index. The superposition of content used with transparency.
- Transparency: The "opacity" property. W3C CSS 3 specification.