Question

I want to give a div a glassy reflection appearance as well as a semi transparent effect. How can I combine these two effects so that the div will look like a glassy transparent gadget? Is there a way to do this?

The div’s bgcolor is lightskyblue and no background image is set yet.

Answer 1

You can give alpha tranparency in your background color.

For example

div { 
    background: rgba(255,255,255,0.5); /* white color with 50% transparency */
}

In IE However, rgba does not works. You need to use filter.

For Example

div {
    background: transparent;
    -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff)"; /* For IE8 */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#77ffffff, endColorstr=#77ffffff); /* < IE 7 */
    zoom: 1;
}

The color patter in both the start and end color is different than the way in RGBA, it user ARGB Format and all in Hex. Like in above example, following are how the values are distributed

77: alpha (fully transparent: 00, fully opaque: FF) 
ff: Red
ff: Green
ff: Blue

This method will place a transparent background on your division, but if you want the entire div to be tranparent including everything inside, then you can use opacity property

For example

div {
    background: #fff;
    opacity: 0.5; /* This is not support in IE though, use filter if needed in IE *
}

Demo