Put text into a content bar?

Question

I'm trying to put some content into a contentbar which has a opacity of 0.6. I don't want the content ( text, videos, etc) to have the same opacity as the contentbar. I tried putting them into two different div tags with one of them inside the other one but when I do so the text will not be on top of the contentbar.

Hopefully I explained well enough.

.content {
  color: #ffffff;
  position: relative;
  z-index:1;
}

.bg {
  width: 80%
    opacity: .6;
  background-color: #000000;
  margin-left: 10%;
  margin-right: 10%;
  border-radius: 3px;
  overflow: hidden;
}

<div class="content">
  <p>Hello World!</p>
  <div class="bg">
    <h1>Hello world!</h1>
  </div> 
</div>

Hi here is the exact question, hope it helps! http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div — Keff, Feb 19 '16 at 13:09

score 0 · Answer 1 · answered Feb 19 '16 at 13:07

0

Instead of using HEX color code in .bg class use RGBA colors like background-color:rgba(0, 0, 0, 0.6) & remove opacity:0.6. Because every child under the opacity element also get transparent.

answered Feb 19 '16 at 13:07

saadeez

1,588
3
11
17

score 0 · Answer 2 · answered Feb 19 '16 at 13:08

0

You cannot do this with opacity, because all of the child elements will take on their parent's opacity as the baseline. What you can do is use background:rgba(); to make the parent's background transparent while not affecting its children. See this http://jsbin.com/taxevufaqo/edit?html,css,output

answered Feb 19 '16 at 13:08

Joey M-H

763
1
6
15

You can do it if the text and the bg are siblings stacked on the z-axis. Siblings opacities do not affect each other. – Dustin Poissant Feb 19 '16 at 13:19
Right, I understood that Dorian wanted opacity on the parent but not on the children. Reading the question again I am not exactly sure which is the case... – Joey M-H Feb 19 '16 at 13:22
He doesn't specify exactly which item HAS to have the opacity. He just wants the opacity on something behind text and doesn't want the text to be affected. – Dustin Poissant Feb 19 '16 at 13:25

score 0 · Answer 3 · answered Feb 19 '16 at 13:11

0

yeah I've had that problem a few times, the best fix is this quick hack.

background-color:rgba(255,0,0,0.5);

Change 255 in inspect element until you find the colour you need. Hope that helps.

answered Feb 19 '16 at 13:11

Beep

2,737
7
36
85

score 0 · Accepted Answer · answered Feb 19 '16 at 13:18

Everyone will suggest using a "RGBA" color instead of "HEX" and if you are using a background color that will work fine.

#content {
  background: rgba(0,0,0,0.5);
}

<div id='content'><p>Hello World</p></div>

If you are using an image or something other than a color then you will have to continue with your approach of two divs, one under the other. The issue with this is the content must have a fixed height to align everything properly.

#content,
#bg,
#content p {
  display: block;
  width: 200px;
  height: 30px;
}
#content {
  position: relative;  
  z-index: 0;
}
#bg,
#content p {
  position: absolute;
  top: 0;
  left: 0;
}
#bg {
  background: #36f; /* Can be an image */
  opacity: 0.5;
  z-index: 1;
}
#content p {
  line-height: 30px;
  text-align: center;
  color: black;
  z-index: 2;
  margin: 0;
}

<div id='content'>
  <div id='bg'></div>
  <p>Hello World</p>
</div>

Put text into a content bar?

4 Answers4