0

I would like to create a modal. I want the parent element to be slightly transparent and dark to make the modal object more visible. I want the modal to have a black background. However, the model disappears with a black background. And I wonder why does it disappear? And what do I have to do to make the modal have a black background?

What I expect

enter image description here

Working example with a color other than black. working fine

<div id="area" class="area">
  <div class="cover"></div>
</div>

.area {
  position: relative;
  flex: 1 0 auto;
  margin: 10px 15px;
  padding: 10px;
}

.area .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity:0.8;
}

.note {
  width: 50%;
  background: green;
  margin: 0px auto;
  color: white;
  display: flex;
  justify-content: center;
  margin-top:10%;
  border: 1px;
  border-radius: 8px;
  height: 200px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding:10px;
  box-sizing: border-box;
  font-size: 2rem;
}
<div id="area" class="area">
  <h1>lorem ipsum</h1>
  <div class="cover">
    <div class="note">xx</div>
  </div>
</div>

Not working when the background-color is black

<div id="area" class="area">
  <div class="cover"></div>
</div>

.area {
  position: relative;
  flex: 1 0 auto;
  margin: 10px 15px;
  padding: 10px;
}

.area .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: black;
  opacity:0.8;
}

.note {
  width: 50%;
  background: black; /* not working with black*/
  margin: 0px auto;
  color: white;
  display: flex;
  justify-content: center;
  margin-top:10%;
  border: 1px;
  border-radius: 8px;
  height: 200px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding:10px;
  box-sizing: border-box;
  font-size: 2rem;
}
<div id="area" class="area">
  <h1>lorem ipsum</h1>
  <div class="cover">
    <div class="note">xx</div>
  </div>
</div>
Max Pattern
  • 1,430
  • 7
  • 18

2 Answers2

2

That is because you set opacity on the whole of modal, and that includes the .note as well.

You should use background-color:rgba(0,0,0,0.8); for the background of the modal. This way the background color is semi-trasparent and not the whole element.

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Can you explain me very short why i have to use rgba, please? – Max Pattern Sep 12 '22 at 10:22
  • 1
    Originally, you had set the opacity on `.cover` which was the container of `.note`. This means that the note would also appear semi transparent. Since they both had a black background there was no difference between the two layers. The `rgba` (means red, green, blue, alpha) and alpha means the transparency of the color. So in effect the element is not transparent, but the background color is. The values i used are 0 for rgb which translates to black, and 0.8 for the alpha which translates to 80%. – Gabriele Petrioli Sep 12 '22 at 10:27
  • 1
    Thank you for replying to my comment! Have a good start to the week. – Max Pattern Sep 12 '22 at 10:30
1

Using opacity on an element turns the entire element + its containing children their opacity down. If you want the background to be semi-transparent do it by inserting a opacity value inside the background-color using rgba()

FUZIION
  • 1,606
  • 1
  • 6
  • 19