0

Ok so what I am trying to do is the following:

  1. Have one div with a background image
  2. 1 div floating over first with a opacity of .50 and background color
  3. Have a third div float on top of all with text.

I am using the following css and html and it does not work properly. The top div is assigned the opacity of the one below. I believe this has to do with parent divs how do I fix it?

#mbox {width:100%; height:150px; background:url(makerback.png)}
#mbox2 {width:100%; height:150px; background:#000000; opacity:.75;}
#mbox3 {width:80%; margin:0 auto; top:auto; bottom:auto; height:100px; text-align:center; color:white; line-height:100px; font-weight:bold; font-size:20pt; opacity:.;}

<div id="mbox">
    <div id="mbox3">
        <div id="mbox2">TEST TEXT</div>

    </div>
</div>
TRacey
  • 1
  • 2

2 Answers2

0

I think that everything is working as you'd expect, except that the opacity is also being applied to #mbox2.

Since it is within the bounds of #mbox3, it will also have opacity: .5.

I believe this might lend to the illusion that the entire image behind it is also being faded out.

It's a little hard to imagine in your head, but your text element, should be placed beside the container if you don't want it to inherit opacity.

You can then just move it inside the bounds of your parent #mbox div using position: absolute.

Either way I created a JSFiddle that should do what you have in mind.

progietheus
  • 76
  • 1
  • 3
0

If I understood your questions you want your text to be in front, then your div with some background color and your final parent div with a background image.

You can stop your #mbox2 div from inheriting the opacity using background-color: rgba() and set in there your opacity level.

Here's a pen: Pen for the answer,

Hope it helps.

sebaLinares
  • 485
  • 5
  • 17