当父容器与子元素均设置半透明背景色（如 rgba）且发生视觉重叠时，浏览器会将两层透明度混合渲染，导致颜色加深。根本解决方案是确保至少一层背景为完全不透明（opacity: 1 或 alpha = 1），或合理控制各层透明度层级。
在 CSS 渲染中，背景色的“叠加变暗”并非 CSS 的 bug，而是符合 W3C 规范的预期行为：当一个具有透明背景（如 rgba(0, 0, 0, 0.87)）的父元素内嵌另一个同样带透明背景（如 #37374d 实际等价于 rgba(55, 55, 77, 1)）的子元素时，若子元素未脱离父元素的堆叠上下文或未遮挡父背景，其视觉效果仍受父层透明度影响——尤其当子元素尺寸小于父容器、或存在 border/padding 留白时，父背景会透过子元素“透出”，造成混合感知。
但更常见、也更易被忽视的原因是：子元素虽设置了不透明背景色，却因父元素的 rgba 背景 + 子元素自身未强制隔离绘制上下文，导致人眼误判为“颜色叠加”。实际上，只要子元素具备完全不透明背景（alpha = 1）且完全覆盖其所在区域，它就会遮挡住父背景，实现真正的“非混合”。
✅ 正确做法：确保关键覆盖层使用 全不透明背景
.dark {
background-color: rgba(0, 0, 0, 0.87); /* 父层可保持半透明 */
color: #ddd;
transition: all 0.5s ease-in-out;
}
.sidedrawer {
position: fixed;
top: 0;
bottom: 0;
width: 170px;
left: -170px;
background-color: #37374d; /* ✅ 已是 opaque（alpha=1），无需改写 */
z-index: 99;
/* 关键增强：显式声明 opacity 和 isolation 防止意外混合 */
opacity: 1;
isolation: isolate; /* 创建独立层叠上下文，避免与父透明背景混合渲染 */
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- opacity: 1 虽为默认值，但显式声明可提高可维护性，并防止被继承的 opacity
- isolation: isolate 是现代推荐方案，它为该元素创建新的层叠上下文（stacking context），使 .sidedrawer 的渲染完全独立于 .dark 的透明背景，从根本上阻断颜色混合；
- 避免对 .sidedrawer 设置 rgba(...,
- 若需实现“柔和叠加”效果（如模态框蒙层+内容面板），应主动设计层级逻辑：例如蒙层用 rgba(0,0,0,0.5)，面板用 background-color: #37374d;（opaque），而非两者都用半透明。
? 进阶技巧：使用 backdrop-filter 替代多层背景叠加
若目标是“深色主题下侧边栏呈现磨砂玻璃感”，推荐用 backdrop-filter: blur(4px) 配合纯色背景，而非依赖多层 rgba 叠加——既语义清晰，又规避混合陷阱：
.sidedrawer {
background-color: rgba(55, 55, 77, 0.92); /* 主体仍高不透明度 */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}总结：CSS 中背景色“意外变暗”的本质是透明度叠加（alpha compositing）。破局关键在于——明确每一层的视觉职责：遮挡层必须不透明，装饰层才可半透明；并通过 isolation 或 will-change: transform 等属性主动隔离渲染上下文。这不仅是样式修复，更是构建健壮 UI 分层体系的基础实践。
