No opacity on div inside a div with opacity

Question

I have to use the asp.net ajax toolkit for a task and what I am doing is to display a div on the whole screen when an update progress control is triggered. The main div (tha

Answer 1

To overcome this issue, use the RGBA background property on the parent 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 its own opacity value that will not be inherited by its 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/