html - 子 div 不透明度可以小于父 div 吗？

Question

基本上我想实现这个(如下图所示)。

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

这是 fiddle 链接 http://jsfiddle.net/Rp5BN/1274/

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

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

有什么建议吗？

Answer 1

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

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

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

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