通过伪元素 ::before 在容器上叠加半透明遮罩层，使子元素（如顶部栏）可独立设置不透明纯色背景，避免 opacity 继承导致的误染。
通过伪元素 `::before` 在容器上叠加半透明遮罩层，使子元素（如顶部栏）可独立设置不透明纯色背景，避免 `opacity` 继承导致的误染。
在 CSS 中，opacity 是继承性属性——当父元素（如 #bg）设置了 opacity: 0.7，其所有子元素（包括 #topbar）会无条件继承该透明度，即使显式声明 opacity: 1 或使用 rgba(128, 128, 128, 1) 也无法覆盖。这是初学者常遇的布局陷阱。
正确解法是剥离视觉层与结构层：将半透明效果从 DOM 元素本身移出，改用伪元素实现遮罩，从而让真实子元素完全脱离透明度影响。
以下为推荐实现方案：
body {
margin: 0;
background: url('bg.jpg') no-repeat center/cover; /* 推荐显式定义背景行为 */
}
#bg {
position: relative;
height: 100vh;
width: 100%;
}
#bg::before {
content: "";
display: block;
position: absolute;
inset: 0; /* 等价于 top:0; right:0; bottom:0; left:0 */
background-color: black;
opacity: 0.7;
}
#topbar {
background-color: gray;
height: 80px;
width: 100%;
position: relative; /* 必须设置 position 才能启用 z-index */
z-index: 1; /* 确保位于 ::before 遮罩层之上 */
}对应 HTML 保持简洁：
<div id="bg"> <div id="topbar"></div> </div>
✅ 关键要点说明：
- #bg 本身不设背景色或透明度，仅作定位容器；
- #bg::before 作为绝对定位的全尺寸遮罩层，承担半透明黑色效果；
- #topbar 通过 position: relative + z-index: 1 显式提升层级，确保渲染在遮罩层上方；
- 此方案兼容所有现代浏览器（包括 Safari 14.1+、Chrome 88+、Firefox 68+），且无需修改 HTML 结构或引入额外 DOM 节点。
⚠️ 注意事项：
- 避免对 #bg 使用 background-color + opacity 组合，这是问题根源；
- 若需支持旧版 IE，可退化为 background: rgba(0,0,0,0.7) 直接作用于 #bg，但此时 #topbar 需移出 #bg 外部并用 position: fixed 单独定位；
- inset: 0 是 top/right/bottom/left: 0 的简写，若需兼容较老浏览器，可显式展开书写。
此方法兼顾语义清晰性、样式可维护性与渲染性能，是处理「局部遮罩 + 纯色覆盖」场景的标准实践。
