[css] I do not want to inherit the child opacity from the parent in CSS

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?

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);
}

The question didn't defined if the background is a color or an image but since @Blowski have already answered for coloured backgrounds, there's a hack for images below:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

This way you can manipulate the color of your opacity and even add nice gradient effects.

.wrapper {_x000D_
  width: 630px;_x000D_
  height: 420px;_x000D_
  display: table;_x000D_
  background: linear-gradient(_x000D_
    rgba(0,0,0,.8), _x000D_
    rgba(0,0,0,.8)), _x000D_
    url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');_x000D_
 }_x000D_
_x000D_
h1 {_x000D_
  display: table-cell;_x000D_
  vertical-align: middle;_x000D_
  text-align: center;_x000D_
  color: #fff;_x000D_
  }

<div class="wrapper">_x000D_
<h1>Question 5770341</h1>_x000D_
</div>

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);

Assign opacity 1.0 to the child recursively with:

div > div { opacity: 1.0 }

Example:

div.x { opacity: 0.5 }_x000D_
div.x > div.x { opacity: 1.0 }

<div style="background-color: #f00; padding:20px;">_x000D_
  <div style="background-color: #0f0; padding:20px;">_x000D_
    <div style="background-color: #00f; padding:20px;">_x000D_
      <div style="background-color: #000; padding:20px; color:#fff">_x000D_
         Example Text - No opacity definition_x000D_
      </div>_x000D_
    </div>  _x000D_
  </div>_x000D_
</div>_x000D_
<div style="opacity:0.5; background-color: #f00; padding:20px;">_x000D_
  <div style="opacity:0.5; background-color: #0f0; padding:20px;">_x000D_
    <div style="opacity:0.5; background-color: #00f; padding:20px;">_x000D_
      <div style="opacity:0.5; background-color: #000; padding:20px; color:#fff">_x000D_
        Example Text - 50% opacity inherited_x000D_
      </div>_x000D_
    </div>  _x000D_
  </div>_x000D_
</div>_x000D_
<div class="x" style="background-color: #f00; padding:20px;">_x000D_
  <div class="x" style="background-color: #0f0; padding:20px;">_x000D_
    <div class="x" style="background-color: #00f; padding:20px;">_x000D_
      <div class="x" style="background-color: #000; padding:20px; color:#fff">_x000D_
         Example Text - 50% opacity not inherited_x000D_
      </div>_x000D_
    </div>  _x000D_
  </div>_x000D_
</div>_x000D_
<div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff">_x000D_
  Example Text - 50% opacity_x000D_
</div>

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

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.

There is no one size fits-all approach, but one thing that I found particularly helpful is setting opacity for a div's direct children, except for the one that you want to keep fully visible. In code:

<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
    <div class="child4"></div>
</div>

and css:

div.parent > div:not(.child1){
    opacity: 0.5;
}

In case you have background colors/images on the parent you fix color opacity with rgba and background-image by applying alpha filters

It seems that display: block elements do not inherit opacity from display: inline parents.

Codepen example

Maybe because it's invalid markup and the browser is secretly separating them? Because source doesn't show that happening. Am I missing something?

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.

On mac you can use Preview editor to apply opacity to a white rectangle laid over your .png image before you put it in your .css.

1) Image
Logo

2) Create a rectangle around the image
Rectanle around logo

3) Change background color to white
rectangle turned white

4) Adjust rectangle opacity
opaque image

My answer is not about static parent-child layout, its about animations.

I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with visibility: hidden):

.main.invisible .test {
  visibility: hidden;
}
.main.opacity-zero .test {
  opacity: 0;
  transition: opacity 0s !important;
}
.test { // parent div
  transition: opacity 1s;
}
.test-svg { // child svg
  visibility: visible;
}

And then, in js, you removing .invisible class with timeout function, adding .opacity-zero class, trigger layout with something like whatever.style.top; and removing .opacity-zero class.

var $main = $(".main");
  setTimeout(function() {
    $main.addClass('opacity-zero').removeClass("invisible");
    $(".test-svg").hide();
    $main.css("top");
    $main.removeClass("opacity-zero");
  }, 3000);

Better to check this demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

If you have to use an image as the transparent background, you might be able to work around it using a pseudo element:

html

<div class="wrap"> 
   <p>I have 100% opacity</p>  
</div>

css

.wrap, .wrap > * {
  position: relative;
}
.wrap:before {
  content: " ";
  opacity: 0.2;
  background: url("http://placehold.it/100x100/FF0000") repeat;     
  position: absolute;
  width: 100%;
  height: 100%;
}

For other people trying to make a table (or something) look focused on one row using opacity. Like @Blowski said use color not opacity. Check out this fiddle: http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)

Answers above seems to complicated for me, so I wrote this:

#kb-mask-overlay { _x000D_
    background-color: rgba(0,0,0,0.8);_x000D_
    width: 100%;_x000D_
    height: 100%; _x000D_
    z-index: 10000;_x000D_
    top: 0; _x000D_
    left: 0; _x000D_
    position: fixed;_x000D_
    content: "";_x000D_
}_x000D_
_x000D_
#kb-mask-overlay > .pop-up {_x000D_
    width: 800px;_x000D_
    height: 150px;_x000D_
    background-color: dimgray;_x000D_
    margin-top: 30px; _x000D_
    margin-left: 30px;_x000D_
}_x000D_
_x000D_
span {_x000D_
  color: white;_x000D_
}

<div id="kb-mask-overlay">_x000D_
  <div class="pop-up">_x000D_
    <span>Content of no opacity children</span>_x000D_
  </div>_x000D_
</div>_x000D_
<div>_x000D_
 <p>_x000D_
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna._x000D_
_x000D_
Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu. _x000D_
 </p>_x000D_
</div>

kb-mask-overlay it's your (opacity) parent, pop-up it's your (no opacity) children. Everything below it's rest of your site.