Parent div transparent background but not affect child div transparency

Question

    

        some stuff, images etc
    



.container{
    background-colo         


        

Answer 1

The most reasonable solution is:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 to 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
}

Answer 2

You need to use the RGBA background property on the container div. background: rgba(64, 64, 64, 0.5). 64, 64, 64 are the RGB color values. and 0.5 is the opacity value. Now parent can have it's own opacity value not affecting children. This is fully supported by FireFox, Opera, Chrome, Safari and IE9.

Check working example at http://jsfiddle.net/Rp5BN/

To support IE 5.5 to 8 we need to use vendor-specific CSS 'gradient filter:' So you need to add this.

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

Where 7f represents 127, i.e. 50% opacity and 404040 is the color.

Check working example in IE http://jsfiddle.net/Rp5BN/2/