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

Question

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

User · Answer

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

User · Answer

Opacity is not actually inherited in CSS   It s a post-rendering group transform   In other words  if a  lt div gt  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

User · Answer

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               lt div class  container  gt                        lt div class  bar  gt                     lt div class  text  gt The text opacity is inherited   from the parent div     lt  div gt                 lt  div gt               lt  div gt    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          lt div class  container  gt              lt div class  text  gt Opacity is not inherited from parent div  bar  lt  div gt            lt div class  bar  gt  lt  div gt          lt  div gt    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

User · Answer

Answers above seems to complicated for me  so I wrote this    x000D   x000D   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  gt   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    x000D   lt div id  kb-mask-overlay  gt  x000D     lt div class  pop-up  gt  x000D       lt span gt Content of no opacity children lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div gt  x000D    lt p gt  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    lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    kb-mask-overlay it s your  opacity  parent  pop-up it s your  no opacity  children  Everything below it s rest of your site

User · Answer

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

User · Answer

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  gt   row not  hover

User · Answer

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

User · Answer

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    lt div class  parent  gt       lt div class  child1  gt  lt  div gt       lt div class  child2  gt  lt  div gt       lt div class  child3  gt  lt  div gt       lt div class  child4  gt  lt  div gt   lt  div gt    and css   div parent  gt  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

User · Answer

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

User · Answer

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    x000D   x000D   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      x000D   lt div class  wrapper  gt  x000D   lt h1 gt Question 5770341 lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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  ImageLogo2  Create a rectangle around the imageRectanle around logo3  Change background color to whiterectangle turned white4  Adjust rectangle opacityopaque image

User · Answer

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

User · Answer

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

User · Answer

Assign opacity 1 0 to the child recursively with   div  gt  div   opacity  1 0     Example   x000D   x000D  div x   opacity  0 5   x000D  div x  gt  div x   opacity  1 0   x000D   lt div style  background-color   f00  padding 20px   gt  x000D     lt div style  background-color   0f0  padding 20px   gt  x000D       lt div style  background-color   00f  padding 20px   gt  x000D         lt div style  background-color   000  padding 20px  color  fff  gt  x000D           Example Text - No opacity definition x000D         lt  div gt  x000D       lt  div gt    x000D     lt  div gt  x000D   lt  div gt  x000D   lt div style  opacity 0 5  background-color   f00  padding 20px   gt  x000D     lt div style  opacity 0 5  background-color   0f0  padding 20px   gt  x000D       lt div style  opacity 0 5  background-color   00f  padding 20px   gt  x000D         lt div style  opacity 0 5  background-color   000  padding 20px  color  fff  gt  x000D          Example Text - 50  opacity inherited x000D         lt  div gt  x000D       lt  div gt    x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  x  style  background-color   f00  padding 20px   gt  x000D     lt div class  x  style  background-color   0f0  padding 20px   gt  x000D       lt div class  x  style  background-color   00f  padding 20px   gt  x000D         lt div class  x  style  background-color   000  padding 20px  color  fff  gt  x000D           Example Text - 50  opacity not inherited x000D         lt  div gt  x000D       lt  div gt    x000D     lt  div gt  x000D   lt  div gt  x000D   lt div style  opacity  0 5  background-color   000  padding 20px  color  fff  gt  x000D    Example Text - 50  opacity x000D   lt  div gt  x000D   x000D   x000D

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

Examples related to css