CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
saint_foo
saint_foo

Reputation: 75

Opacity bleeding into child divs

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

Upvotes: 1

Views: 487

Answers (2)

dippas
dippas

Reputation: 60573

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>

Upvotes: 1

Nur Ys
Nur Ys

Reputation: 143

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.

Upvotes: 0

Related Questions