Bootstrap child opacity cannot overwrite opacity set in a parent [duplicate]

I do not want to inherit the child opacity from the parent in CSS.

I have one div which is the parent, and I have another div inside the first div which is the child.

I want to set the opacity property in the parent div, but I don't want the child div to inherit the opacity property.

How can I do that?

Solution 1:

Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency.

So instead of:

background-color: rgb(0,0,255); opacity: 0.5;

use

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

Solution 2:

Opacity is not actually inherited in CSS. It's a post-rendering group transform. In other words, if a <div> has opacity set you render the div and all its kids into a temporary buffer, and then composite that whole buffer into the page with the given opacity setting.

What exactly you want to do here depends on the exact rendering you're looking for, which is not clear from the question.

Solution 3:

As others have mentioned in this and other similar threads, the best way to avoid this problem is to use RGBA/HSLA or else use a transparent PNG.

But, if you want a ridiculous solution, similar to the one linked in another answer in this thread (which is also my website), here's a brand new script I wrote that fixes this problem automatically, called thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Basically it uses JavaScript to remove all children from the parent div, then reposition the child elements back to where they should be without actually being children of that element anymore.

To me, this should be a last resort, but I thought it would be fun to write something that did this, if anyone wants to do this.

Solution 4:

A little trick if your parent is transparent and you would like your child to be the same, but defined exclusively (e.g. to overwrite the user agent styles of a select dropdown):

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}

Solution 5:

Opacity of child element is inherited from the parent element.

But we can use the css position property to accomplish our achievement.

The text container div can be put outside of the parent div but with absolute positioning projecting the desired effect.

Ideal Requirement------------------>>>>>>>>>>>>

HTML

            <div class="container">       
              <div class="bar">
                  <div class="text">The text opacity is inherited   from the parent div    </div>
              </div>
            </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;

               }

Output:--

the Text is not visible because inheriting opacity from parent div.

Solution ------------------->>>>>>

HTML

       <div class="container">  
         <div class="text">Opacity is not inherited from parent div "bar"</div>
         <div class="bar"></div>
       </div>

CSS

               .container{
                position:relative;
                                   }
           .bar{
               opacity:0.2;
               background-color:#000;
               z-index:3;
               position:absolute;
               top:0;
               left:0;
              }

              .text{
                color:#fff;
                z-index:3;
                position:absolute;
               top:0;
               left:0;  
               }

Output :

the Text is visible with same color as of background because the div is not in the transparent div