通过伪元素叠加半透明遮罩层，而非直接对容器设置 opacity，可使子元素（如顶部栏）不受透明度影响，从而实现背景图变暗、顶部栏保持纯色的效果。
通过伪元素叠加半透明遮罩层，而非直接对容器设置 opacity，可使子元素（如顶部栏）不受透明度影响，从而实现背景图变暗、顶部栏保持纯色的效果。
在 CSS 中，opacity 属性具有继承性：当父元素（如 #bg）设置了 opacity: 0.7，其所有子元素（包括 #topbar）会无条件继承该透明度，即使你为子元素显式声明 opacity: 1 或使用 rgba(128, 128, 128, 1)，也无法覆盖——因为 opacity 作用于整个渲染层（rendering layer），而非仅颜色值。
✅ 正确解法：剥离遮罩逻辑，用伪元素 ::before 独立绘制半透明层，让内容区域（#topbar）完全脱离透明度影响：
body {
margin: 0;
background: url('bg.jpg') center/cover no-repeat;
}
#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 遮罩层之上 */
}<div id="bg"> <div id="topbar"></div> </div>
? 关键要点：
- ::before 伪元素作为独立渲染层，只负责视觉遮罩，不影响 DOM 结构和子元素样式；
- inset: 0 是现代 CSS 推荐写法（兼容性良好，Chrome 58+/Firefox 55+），替代冗长的 top/right/bottom/left: 0；
- z-index 仅在元素具有 position: relative/absolute/fixed/sticky 时生效，切勿遗漏；
- 若需兼容旧版浏览器（如 IE），可用 top:0; left:0; width:100%; height:100% 替代 inset: 0。
⚠️ 注意：避免滥用 opacity 控制局部透明度——它始终作用于整个元素及其后代。对于“背景变暗 + 内容不透明”的常见需求，伪元素遮罩 + 绝对定位是最健壮、语义清晰且性能友好的方案。
