wrapper with opacity and set div on this wrapper without opacity

Question

I have wrapper div that has opacity set to 0.75. The problem is that when I place another div it also is transparent.

Here is HTML:

<div id="header_wrapper">
     <div id="header">
         <div class="logo"></div>               
         <ul class="hor_list" id="main_menu">
            <li><a href="#">Home</a></li>
         </ul>
     </div>
</div>

CSS:

#header_wrapper {           
    background: black;
    opacity:0.75;
    filter:alpha(opacity=75); /* For IE8 and earlier */         
    height: 82px;
    margin-bottom: 60px;
}

In this case div.logo and ul#main_menu are both transparent and this is a problem. How to stop this?

_“How to stop this?”_ – by _not_ placing them inside the element with opacity. Opacity works on an element _and all its content_, and there is no way to “reverse” it. — CBroe, Oct 14 '13 at 06:30

score 1 · Answer 1 · answered Oct 14 '13 at 06:31

You cannot prevent the child node from having the parent's opacity, two workarounds would be absolute positioning to place it whereever you need it without being direct child of the opacity parent, OR, most likely that you want the opacity for background, then you can use the RGBA color scheme:

background-color: rgba(255, 0, 0, 0.75);

with 0.75 being the opacity value.

score 1 · Answer 2 · answered Oct 14 '13 at 06:31

1

Instead of an opacity u can use rgba as a backgroundcolor.

example:

#div {
   background: rbga(0, 0, 0, 0.5);
}

answered Oct 14 '13 at 06:31

SKeurentjes

1,848
12
18

score 0 · Answer 3 · answered Oct 14 '13 at 06:34

If a div is set opacity all the contents inside the div will have the opacity, there is no way to change this behavior than on simple thing.

Make wrapper div position relative, and header div position absolute and so that it will be solved. top and left are based on header div positions relative to wrapper div

<div id="header_wrapper" style="position:relative">
     <div id="header" style="postition:absolute; top:10px;left:10px">
         <div class="logo"></div>               
         <ul class="hor_list" id="main_menu">
            <li><a href="#">Home</a></li>
         </ul>
     </div>
</div>

I hope it helped :)

wrapper with opacity and set div on this wrapper without opacity

3 Answers3