css 实现背景透明，子元素不透明的效果

直接上代码

下面是两个盒子，一个作为背景，一个作为交互窗口

 <div class="dialog-bg">
    <div class="dialog">
      <textarea name id cols="30" rows="10" placeholder="输入常用语"></textarea>
      <div>
        <button @click="cancle">取消</button>
        <button>提交</button>
      </div>
    </div>
  </div>

style

先展示失败的代码

.dialog-bg {
  z-index: 7;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  background-color: black;
  opacity: 0.8;
}
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 300px;
  background: white;
  opacity: 1;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
  textarea {
    width: 400px;
    height: 200px;
    border: solid 1px gray;
  }
}

这是效果：

。。。太长了，核心是

background-color: black;
opacity: 0.8;

这个结果是背景透明，但是子元素也是透明的，接下来是重点

// background-color: black;
// opacity: 0.8;
background: rgba(0, 0, 0, 0.5);

这样就能实现想要的效果了，就是背景透明

---

but 谁能告诉我这是为什么呢？？
参考文章