模态框子元素黑色背景因父元素opacity失效的问题及解决

我想要创建一个模态框，设置父遮罩元素为半透明深色以突出模态框主体，希望模态框背景为黑色。但设置黑色背景后模态框消失，使用其他颜色背景则正常。请问这是什么原因？该如何解决才能让模态框拥有黑色背景？

预期效果 #

非黑色背景可正常运行的代码示例 #

HTML #

<div id="area" class="area">
  <h1>lorem ipsum</h1>
  <div class="cover">
    <div class="note">xx</div>
  </div>
</div>

CSS #

.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;
}

黑色背景失效的代码示例 #

HTML #

<div id="area" class="area">
  <h1>lorem ipsum</h1>
  <div class="cover">
    <div class="note">xx</div>
  </div>
</div>

CSS #

.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; /* 此处设置黑色后模态框消失 */
  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;
}

原因分析 #

问题出在父元素.cover设置的opacity:0.8会被子元素继承，导致模态框.note的黑色背景也变成半透明状态。而.cover本身就是半透明黑色，两者叠加后视觉上几乎融为一体，看起来就像模态框消失了。

解决方法 #

方法1：用RGBA设置遮罩背景（推荐） #

把.cover的background和opacity合并成RGBA格式，这样不会影响子元素的透明度：

.area .cover {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8); /* 直接设置半透明黑色，无需单独加opacity */
}

此时.note的黑色背景会保持完全不透明，和半透明遮罩形成明显对比，就能正常显示。

方法2：给模态框添加差异化样式 #

如果一定要保留opacity属性，可以给.note添加明显的边框或调整阴影颜色，让它和遮罩区分开：

.note {
  /* 其他样式不变 */
  border: 2px solid #fff; /* 白色边框增强区分度 */
  box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19); /* 浅色阴影 */
}

内容的提问来源于stack exchange，提问作者Max Pattern