通过伪元素叠加半透明遮罩层，可让父容器实现背景图变暗效果，同时保持子元素（如顶部栏）完全不透明。
通过伪元素叠加半透明遮罩层，可让父容器实现背景图变暗效果，同时保持子元素（如顶部栏）完全不透明。
在实际开发中，常需在带背景图的页面上叠加一层半透明遮罩以提升文字可读性，但又希望顶部导航栏等关键 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 的继承陷阱，是实现“背景柔化 + 前景实色”布局的稳健实践。
