Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No opacity on div inside a div with opacity

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 (that covers the whole screen) is having some opacity but when I try to have a div inside this one that one also gets some opacity even though I set it to none;

Example HTML:

<ProgressTemplate>
            <div class="updateProgressBox">
                <div class="updateProgressMessage">
                    <p>Processing request..</p>
                </div>
            </div>
</ProgressTemplate>

And CSS:

.updateProgressBox {
    top: 0px; 
    height: 100%; 
    background-color:Gray;
    opacity:0.7; 
    filter:alpha(opacity=70);
    vertical-align: middle; 
    left: 0px; 
    z-index: 999999; 
    width: 100%; 
    position: absolute;
    text-align: center;   
}

.updateProgressMessage {
    border: black 2px solid;
    background-color: #fff;
    z-index: 1000000;   
    padding: 20px;
    opacity:1.0; 
    filter:alpha(opacity=100);
    margin: 300px auto auto auto;
    font-weight: bold; 
    vertical-align: middle;
    width: 200px; 
    text-align: center
}

What should I do to make the div with the message have no transparency and white background color?

like image 415
Nick Avatar asked Feb 28 '11 03:02

Nick


People also ask

How change the opacity of a div inside a div?

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.

Can you not inherit an opacity?

Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel).

How do I make a Div non transparent?

Instead of setting the color and controlling transparency with opacity/alpha properties, set the background-color property directly using rgba(rrr,ggg,bbb,aaa) format. This will prevent any child elements from inheriting any transparency.

How do you make opacity not affect children?

Answer: Use the CSS RGBA colors There is no CSS property like "background-opacity" that you can use only for changing the opacity or transparency of an element's background without affecting its child elements.


2 Answers

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/

like image 130
Hussein Avatar answered Sep 30 '22 17:09

Hussein


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().
like image 35
alex Avatar answered Sep 30 '22 18:09

alex