如何让div在半透明背景上层呈现纯色？

原代码 #

CSS #

body {
  background: url(bg.jpg);
  margin: 0;
}

#bg {
  background-color: black;
  margin: 0;
  padding: 0;
  height: 100vh;
  opacity: 0.7;
}

#topbar {
  background-color: gray;
  height: 80px;
  width: 100%;
}

HTML #

<div id="bg">
  <div id="topbar"></div>
</div>

问题描述 #

尝试为#topbar添加opacity: 1或alpha值为1的rgba属性后，背景图上方的黑色层透明度为0.7，但#topbar也跟着呈现0.7的透明度，无法显示纯色。目标是让背景图变暗，同时#topbar显示纯色。

解决方案 #

问题出在opacity属性会被子元素继承，子元素无法通过设置opacity:1抵消父元素的透明度。改用rgba设置#bg的背景色，就能让背景半透明但不影响子元素：

修改后的CSS #

body {
  background: url(bg.jpg);
  margin: 0;
}

#bg {
  background-color: rgba(0, 0, 0, 0.7); /* 用rgba实现黑色半透明，仅作用于背景 */
  margin: 0;
  padding: 0;
  height: 100vh;
}

#topbar {
  background-color: gray; /* 纯色背景，不受父元素影响 */
  height: 80px;
  width: 100%;
}

原理 #

opacity会让整个元素（包括所有子元素）都变得透明，而rgba的透明度仅作用于元素的背景本身，子元素的样式不会被影响，这样#topbar就能保持完全不透明的纯色状态，同时背景图被黑色半透明层变暗。

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