伪元素剥离透明层是最直接兼容的解法，用::before/::after承载透明效果，内容保持不透明；isolation: isolate可阻断混合链；多层背景用background多值语法；调试应以devtools拾色器为准。
伪元素剥离透明层，只合成一次
把透明效果从真实 DOM 结构里抽出来，交给 ::before 或 ::after 承担，是最直接、兼容性最好的解法。这样内容子元素保持 100% 不透明，伪元素只和父级背景（或 body）合成一次，彻底避免嵌套叠加。
关键点：
-
position: relative必须加在容器上，否则伪元素无法精确定位 - 用
inset: 0替代top: 0; left: 0; right: 0; bottom: 0，写法更简洁且语义明确 -
z-index: -1确保伪元素沉底，不遮挡任何内容 - 伪元素只设
background-color: rgba()，别加opacity—— 后者会触发额外混合
示例：
.card { position: relative; }
.card::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.08);
z-index: -1;
}
用 isolation: isolate 阻断混合链
当必须保留父子结构（比如组件库封装），又希望子元素“无视”父级半透背景时，isolation: isolate 是现代标准方案。它强制创建独立层叠上下文，切断 alpha 混合路径。
注意：
- 显式写
opacity: 1，防止被继承的opacity 覆盖 - 不要和
opacity 同时出现，否则仍会触发混合 - Chrome/Firefox/Safari 15.4+ 已稳定支持，IE 不支持（但当前项目基本可忽略）
示例：
.sidedrawer {
background-color: #37374d;
opacity: 1;
isolation: isolate;
}
多层背景改用 background 多值语法
想实现红→绿→蓝三层渐进叠加？别堆三个 <div>，直接用 <code>background 多值语法。每层是独立绘制的线性渐变，顺序从左（底层）到右（顶层），不触发 DOM 层级的 alpha 乘法。
要点：
- 每层写成
linear-gradient(rgba(r,g,b,a), rgba(r,g,b,a))，起止色相同即为纯色 - 必须配
background-size: 100% 100%和background-repeat: no-repeat - 不支持
background-color多值，只能用background简写或background-image - 逗号分隔顺序：最左边是底层，最右边盖在最上面
示例：
.panel {
background:
linear-gradient(to bottom, rgba(255,0,0,0.2), rgba(255,0,0,0.2)),
linear-gradient(to bottom, rgba(0,255,0,0.2), rgba(0,255,0,0.2)),
linear-gradient(to bottom, rgba(0,0,255,0.2), rgba(0,0,255,0.2));
background-size: 100% 100%;
background-repeat: no-repeat;
}
调试时别信 getComputedStyle(el).backgroundColor
这个 API 返回的是你写的原始值，不是最终像素结果。比如写了两层 rgba(0,0,0,0.1)，它仍返回 rgba(0, 0, 0, 0.1)，但实际合成色接近 rgba(0, 0, 0, 0.19)，还掺了白色画布。
真正可靠的只有两个动作：
- 用 Chrome DevTools 的拾色器直接点选目标像素，看最终输出值
- 检查父容器是否设了
background-color—— 如果是transparent或没写，默认和白色画布混合，这是发灰主因
最容易被忽略的是：border 和 box-shadow 也各自走 alpha 混合。比如 border: 1px solid rgba(0,0,0,0.2) 在白色背景上会比预期更灰，而 box-shadow: 0 0 10px rgba(0,0,0,0.1) 因为是独立绘制层，反而更可控。
