How to set opacity in parent div and not affect in child div

Question

Hey i am searching in google but i can t fine any perfect answer  I want to Opacity in parent DIV but not Child  DIV  Example   HTML   lt div class  parent  gt   lt div class  child  gt  Hello I am child   lt  div gt   lt  div gt    Css   parent  background url     images madu jpg   no-repeat 0 0     child  Color black      Note  -- I want to background-image in Parent Div not Color

User · Answer

You can t  Css today simply doesn t allow that   The logical rendering model is this one       If the object is a container element  then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is     Reference   css transparency  The solution is to use a different element composition  usually using fixed or computed positions for what is today defined as a child   it may appear logically and visualy for the user as a child but the element doesn t need to be really a child in your code   A solution using css   fiddle   parent       width 500px      height 200px          background-image url  http   canop org blog wp-content uploads 2011 11 cropped-bandeau-cr C3 AAte-011 jpg        opacity  0 2     child       position  fixed      top 0      Another solution with javascript   fiddle

User · Answer

You can do it with pseudo-elements   demo on dabblet com    your markup    lt div class  parent  gt       lt div class  child  gt  Hello I am child  lt  div gt   lt  div gt    css    parent      position  relative      parent before       z-index  -1      content          position  absolute       opacity  0 2      width  400px      height  200px      background  url  http   img42 imageshack us img42 1893 96c75664f7e94f9198ad113 png   no-repeat 0 0       child      Color black

User · Answer

May be it s good if you define your background-image in the  after pseudo class  Write like this    parent      width 300px      height 300px      position relative      border 1px solid red     parent after      content         background url  http   www dummyimage com 300x300 000 fff amp text parent image        width 300px      height 300px      position absolute      top 0      left 0      opacity 0 5     child      background yellow      position relative      z-index 1      Check this fiddle

User · Answer

I had the same problem and I fixed by setting transparent png image as background for the parent tag   This is the 1px x 1px PNG Image that I have created with 60  Opacity of black background

User · Answer

You can t do that  unless you take the child out of the parent and place it via positioning   The only way I know and it actually works  is to use a translucid image   png with transparency  for the parent s background  The only disavantage is that you can t control the opacity via CSS  other than that it works

User · Answer

As mentioned by Tom  background-color  rgba 229 229 229  0 85  can do the trick  Place that on the style of the parent element and child wont be affected

User · Answer

I know this is old  but just in case it will help someone else     lt div style  background-color  rgba 255  0  0  0 5   gt child lt  div gt     Where rgba is  red  green  blue  and a is for transparency

[css] How to set opacity in parent div and not affect in child div?

Examples related to css

Examples related to parent-child

Examples related to opacity