@CoffeedUpHacker的答案是好的，但这里有一个替代方案，它有一些额外的好处。
在这里，我没有将#topbar嵌套在#bg中;它们是兄弟。然后，我用background-image而不是body来样式化#bg。这有以下好处：
1.您可以使用filter来降低亮度，而不是部分透明的黑色覆盖（一个元素而不是两个）。
1.您可以修复背景，它将在所有设备上工作（而在body元素上使用background-attachment: fixed目前在移动的设备上不受支持）。

body {
  margin: 1em;
  color: white;
}

#bg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: url(http://picsum.photos/id/85/1500/1000);
  background-size: cover;
  background-position: center;
  filter: brightness(30%);
}

#topbar {
  margin: -1em -1em 1em -1em;
  padding: 1em;
  background-color: gray;
  height: 4em;
}

个字符

如果你坚持使用非透明的颜色值和HTML结构，还有第三种方法可以实现这种效果，而不需要修改body的background属性。

#bg {
    position: relative;
    height: 100vh;
    width: 100%;
}

#bg::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    background: black;
    opacity: 0.7;
}

#topbar {
    background: gray;
    height: 80px;
    width: 100%;
    position: relative;
    z-index: 1;
}

字符串
请注意，#topbar必须为position设置一个值才能使z-index工作，但除了relative之外，其他值也可以工作。

#topbar位于#bg内部，因此调整#bg的不透明度也会影响#topbar。我会做的是忽略不透明度并将背景色更改为透明黑色。
它看起来像这样：

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

#bg {
    background-color: rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    height: 100vh;
}

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

字符串
这样，只有背景颜色是透明的，而不是整个元素。