Opacity bleeding into child divs

Question

I have nested div tags, and the idea is that the outer one contains a background picture, and then the inner ones have text over them. I'd like to change the opacity on the background picture div so that it's more transparent and easier to see the text. My problem is that it's automatically applying that same opacity to child divs, which I do not want it to do.

Here is the code:

<style type="text/css">
    .myBackgroundDivs {
        background-image: url('homePageBackground.jpg');

        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: contain;
        text-align: center;
        opacity: 0.4;

    }

    .myTextDivs{
            text-align: center;
            opacity:1.0;

    }
</style>

And then:

<div class="container">
    <div class="jumbotron myBackgroundDivs" >
        <div class="myTextDivs">
            <h1>Some Text</h1>
            <h3>Some more text</h3>
            <br><br>
        </div>
    </div>
</div>

Now I looked into this, and I understand that for child elements, opacity actually multiplies itself by the parent element's opacity. With this logic, I tried using 2.5 so 2.5*.4 is 1.0, but I guess you can only go as high as 1.0 opacity.

Any suggestions?

If anyone wanted to explain to what extent/the rules of child divs inheriting attributes from parent divs that would be cool too

And looking for a more sophisticated answer than "Use photoshop" :P — saint_foo, Nov 26 '15 at 03:09
Um, why don't you put the background images behind the text? — Lee Taylor, Nov 26 '15 at 03:12
Because I'm trying to learn about element inheritance and divs — saint_foo, Nov 26 '15 at 03:15
Your top div (with its opacity set to 0.4) is acting like a sheet of frosted glass over the top of everything else beneath it. Therefore, nothing you do will make anything below the initial div "less transaparent" — Lee Taylor, Nov 26 '15 at 03:17
Opacity applies to an element and its children. If this weren't true, what would an element's opacity even mean? — ray, Nov 26 '15 at 03:24
I see...alright thanks. I had assumed it would mean the extent to which you can see through it to what's below it, and in this case the divs are on top of it, so I thought it would work, but if not no worries — saint_foo, Nov 26 '15 at 03:27
Not everything being said is correct. If instead of using a background image you used a background color, you could limit the opacity to only the background using rgba. The content of the inner divs would not inherit the opacity. — Michael Benjamin, Nov 26 '15 at 03:33

dippas · Answer 1 · 2015-11-26T11:40:42.093

whenever you don't want to apply the opacity to inner child use instead rgba on background-color.

why?

because in opacity according to MDN

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

So, see snippet below with differences:

/*SNIPPET ONLY*/

* {
  margin: 0;
  padding: 0
}
body {
  background-color: green
}
.container {
  background-color: red;
  border: 1px solid yellow
}
/*GENERAL*/
.myBackgroundDivs {
  text-align: center;
  width:500px;
  margin:auto
}

/*RGBA*/
.rgba .myBackgroundDivs {
  background: url('http://www.lorempixel.com/500/500') no-repeat fixed center / cover;

}
.rgba .myTextDivs {
  background-color: rgba(255,255,255,.4)
}
/*OPACITY*/
.opacity .myBackgroundDivs {
  background: url('http://www.lorempixel.com/500/500') no-repeat fixed center / cover;
  opacity:.4;
}
.opacity .myTextDivs {
  opacity: 1;
}

<h1>RGBA</h1>
<div class="container rgba">
  <div class="jumbotron myBackgroundDivs">
    <div class="myTextDivs">
      <h1>Some Text</h1>
      <h3>Some more text</h3>
      <br>
      <br>
    </div>
  </div>
</div>
<h1>OPACITY</h1>
<div class="container opacity">
  <div class="jumbotron myBackgroundDivs">
    <div class="myTextDivs">
      <h1>Some Text</h1>
      <h3>Some more text</h3>
      <br>
      <br>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Nov 26 '15 at 03:56

what you are trying to do cannot be done since nested divs will inherit the opacity property and it cannot be overridden

and because you want a background-image and not a background-color the use of rbga() is not useful in this case

so the best way i see it to use and transparent background image (gif, png) and let work that way.

Opacity bleeding into child divs

2 Answers2

Linked