如何让顶部栏拥有纯色背景且不受父容器透明度影响

通过伪元素叠加半透明遮罩层，可让父容器实现背景图变暗效果，同时保持子元素（如顶部栏）完全不透明。

通过伪元素叠加半透明遮罩层，可让父容器实现背景图变暗效果，同时保持子元素（如顶部栏）完全不透明。

在实际开发中，常需在带背景图的页面上叠加一层半透明遮罩以提升文字可读性，但又希望顶部导航栏等关键 UI 元素保持纯色、无透明度干扰。若直接对父容器设置 opacity，其所有子元素（包括 #topbar）都会继承该透明度，导致无法实现“背景变暗 + 顶部栏实色”的目标。

正确解法是剥离透明效果与 DOM 结构的耦合：将半透明效果从 #bg 的背景色或 opacity 中移出，改用伪元素 ::before 进行视觉叠加。这样 #bg 本身仅作为定位容器，不参与渲染透明层，其子元素自然不受透明度影响。

以下是推荐实现方案：

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;  z-index: 0;           /* 确保遮罩位于底层 */}#topbar {  background-color: gray;  height: 80px;  width: 100%;  position: relative;   /* 启用 z-index */  z-index: 1;           /* 置于遮罩层之上，保持完全不透明 */}

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

✅ 关键要点说明：

• #bg 不再设置 background-color 或 opacity，避免污染子元素；
• ::before 伪元素承担半透明黑色遮罩职责，精准覆盖整个容器；
• #topbar 必须声明 position（如 relative、absolute 或 fixed），否则 z-index 无效；
• inset: 0 是现代 CSS 推荐写法，兼容性良好（Chrome 58+/Firefox 55+/Safari 14.1+），若需支持更老浏览器，可显式书写 top: 0; left: 0; right: 0; bottom: 0;。

此方案语义清晰、层级可控，且完全规避了 opacity 的继承陷阱，是实现“背景柔化 + 前景实色”布局的稳健实践。