儿童div不透明度可以比父母div小吗？

Question

基本上我想实现这个目标（如下图所示）。

我在容器中有背景图像，另一个div用黑色不透明度覆盖它。但我不希望我的子div容器受到覆盖div的影响。

这里是小提琴链接http://jsfiddle.net/Rp5BN/1274/

＆＃13;

＆＃13;

#parent {
  width: 400px;
  height: 400px;
  background-image: url(http://lorempixel.com/400/400/);
}
#overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
#child {
  opacity: 1;
  width: 200px;
  height: 200px;
  border: 1px solid #fff;
}

＆＃13;

<div id="parent">
  <div id="overlay">
    <div id="child"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

任何提示？

Answer 1

您可以修改子元素的背景颜色和不透明度。

background: rgba(255, 255, 255, 0.25)添加了白色背景，不透明度为25％，可以达到您想要达到的效果。修改不透明度和rgb值以获得输出屏幕截图的效果（希望我几乎做到了这一点：D）

＆＃13;

＆＃13;

#parent {
  width: 400px;
  height: 400px;
  background-image: url(http://lorempixel.com/400/400/);
}
#overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
#child {
  background: rgba(255, 255, 255, 0.25); /* Add */
  border: 1px solid #fff;
  height: 200px;
  opacity: 1;
  width: 200px;
}

＆＃13;

<div id="parent">
  <div id="overlay">
    <div id="child"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;