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

opacity is inherited and it can not be reset.

You can...

• Use a background image of a 24bit PNG with the alpha transparency.
• Make the other element not a child.
• Use Hussein's suggestion of using rgba().

Answer 2

To accomplish this you need to use an RGBA colour on the background itself as opacity changes the alpha channel for all child nodes within the parent element itself. E.g.

.div {
    background-color: rgba(255,0,0, .5);
}

Answer 3

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/