Child div with image is inheriting opacity from parent

Question

I have a div with a background image.
I apply an opacity to the background image
I create a child div and add text
I DO NOT want the child div to inherit the opacity properties of the parent div

Here is my fiddle example: js fiddle . net / zs4pbmu2/1/

I do NOT want a background color placed behind my text like in this example/pseudo-solution: js fiddle . net / Bbw7r/5/

Please Help!

Every child inherits the parent's transparency. Setting the parent's opacity to A and setting the child's to B will display the child with opacity A*B. — , Dec 12 '16 at 19:15
Possible duplicate of [How to set opacity in parent div and not affect in child div?](http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div) — hungerstar, Dec 12 '16 at 19:17

score 0 · Answer 1 · answered Dec 12 '16 at 19:20

0

Can you alter your HTML structure like this:

<div id="alpha_wrapper">
  <div id="alpha_2">
  </div>
  <div id="text_holder_2">
      THIS IS MY TEXT
    </div>
</div>

Demo

answered Dec 12 '16 at 19:20

sol

22,311
6
42
59

G-Cyrillus · Answer 2 · 2016-12-12T19:44:11.920

you have a few option:

if background is white :

rgba(255,255,255,0.3) color used in a gradient on top of image

#alpha_wrapper {
  width: 540px;
  height: 360px;
  float: left;
  position: relative;
  color: #fff;
}
#alpha_2 {
  background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)), url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat 0 0;
  width: 540px;
  height: 440px;
}
#text_holder_2 {
  color: red;
  font-weight: bold;
  font-size: 28pt;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 500px;
}

<div id="alpha_wrapper">
  <div id="alpha_2">
    <div id="text_holder_2">
      THIS IS MY TEXT
    </div>
  </div>
</div>

rgba(255,255,255,0) color used as an inset shadow:

#alpha_wrapper {
  width: 540px;
  height: 360px;
  float: left;
  position: relative;
  color: #fff;
}
#alpha_2 {
  background: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png) no-repeat 0 0;
  width: 540px;
  height: 440px;
  box-shadow:inset 0 0 0 270px rgba(255, 255, 255, 0.3);
}
#text_holder_2 {
  color: red;
  font-weight: bold;
  font-size: 28pt;
  position: absolute;
  top: 20px;
  left: 20px;
  width: 500px;
}

<div id="alpha_wrapper">
  <div id="alpha_2">
    <div id="text_holder_2">
      THIS IS MY TEXT
    </div>
  </div>
</div>

If the background is not white, but has as a main color or plain color , you can take a look at : http://codepen.io/gc-nomade/pen/wouBe for more examples.

Else you can turn your image into a png and add the transparency to the image itself and not relay on CSS

Child div with image is inheriting opacity from parent

2 Answers2