Home Opacity suppresses background color if child element has same background color

Questions

Opacity suppresses background color if child element has same background color

September 12, 2022

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

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>

>Solution :

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.