CSS Transparent Images
Transparent images are not yet a CSS standard, yet they are supported by most modern browsers. However, this is part of the W3C CSS3 recommendation. Implementation varies from one client to another, so you will have to use more than one syntax for cross-browser compatibility.
The syntax for Firefox and Chrome is this.style.opacity = x where x lies between 0.00 and 1.00. A value of 1.00 means no transparency and 0.00 is totally transparent. IE does things differently (but since when does this come as a surprise?): use this.filters.alpha.opacity = y with y between 0 and 100. The higher the value, the less transparent the image is.
Here is an example of how two overlapping images look like when the one on top has an opacity of 50%.
HTML Example of CSS Transparent Images:
CSS Example:
div#background {
height:200px;
width:300px;
background-image:url('http://www.designcourse.com/images/slide8.jpg');
}
div#transparent {
height:200px;
width:100px;
margin-left:200px;
background-image:url('http://www.designcourse.com/images/gary.jpg');
filter:alpha(opacity=50);
opacity:0.5
}