当两个带有半透明背景色的 html 元素重叠时，浏览器会按 alpha 混合规则叠加颜色，导致视觉上变暗或变色；解决方法是确保底层或顶层元素使用不透明背景（opacity: 1 或 rgba(..., 1)），或合理控制各层透明度。
在 CSS 渲染中，背景色不会“自动叠加”——真正导致颜色变深的，是使用了 rgba()、hsla() 等带 Alpha 通道的颜色值（即第四个参数
✅ 正确做法是：确保至少其中一层使用完全不透明的背景色。例如：
.dark {
background-color: rgba(0, 0, 0, 1); /* 关键：Alpha = 1，完全不透明 */
color: #ddd;
transition: all 0.5s ease-in-out;
--panel-background: #37374d; /* 推荐用不透明 HEX 或 rgba(...,1) 定义变量 */
}
.sidedrawer {
position: fixed;
top: 0;
bottom: 0;
width: 170px;
left: -170px;
background-color: #37374d; /* ✅ 已是不透明 HEX，无需修改 */
z-index: 99;
}⚠️ 注意事项：
- background-color: rgba(0, 0, 0, 0.87) ≠ opacity: 0.87：前者仅影响背景的透明度，后者会使整个元素（含文字、子元素、边框等）整体变淡，并可能引发不必要的层级混合；
- 若需保留「半透明遮罩感」但避免颜色叠加，建议将遮罩层单独抽离为同级兄弟元素（而非父子嵌套），并用 position: fixed/sticky + z-index 控制层级；
- 避免在 .dark 类中同时定义 background-color: rgba(..., 0.87) 和 --main-background: rgba(..., 0.87) —— 这类 CSS 变量若被其他组件复用，易无意引入重复透明度。
? 总结：
重叠区域颜色“变深”的本质是 Alpha 混合，而非 CSS 的 Bug。只要明确控制每一层的背景是否透光（即 Alpha 值是否为 1），就能精准掌控视觉效果。优先使用不透明颜色值（#rrggbb 或 rgba(r,g,b,1)），必要时通过 isolation: isolate 防止混合（适用于更复杂滤镜/混合模式场景），但对纯背景叠加问题，设 Alpha = 1 是最直接、高效且兼容性最佳的解法。
