两层 rgba(0,0,0,0.3) 叠加不是 0.6，因浏览器按像素混合公式 result = foreground × alpha + background × (1 − alpha) 计算，实际得约 rgba(0,0,0,0.51) 且带灰紫调。
为什么两层 rgba(0,0,0,0.3) 叠在一起不是 0.6？
因为浏览器不是简单相加透明度，而是执行像素级混合公式：result = foreground × alpha + background × (1 − alpha)。第一层 rgba(0,0,0,0.3) 混合了默认白色画布，得到偏灰的中间色；第二层再拿这个中间色当背景去混合，结果是 rgba(0,0,0,0.51) 左右，但带明显灰紫调——这不是 bug，是合成模型的必然行为。
常见错误现象包括：DevTools 拾色器点出来的颜色比代码里写的深、设计稿还原失败、深色模式下蒙层突然发雾。
- 父容器没设
background-color，子元素用rgba()→ 默认和白底混合，发灰主因 - 父子都用
rgba()（如父rgba(0,0,0,0.2)，子rgba(0,0,0,0.2)）→ 实际等效于rgba(0,0,0,0.36)，且不可控 - 用
opacity替代background-color: rgba()→ 文字、边框、子元素全变淡，交互区域失效风险高
关键层必须用不透明背景色（#rrggbb 或 rgba(r,g,b,1)）
侧边栏、弹窗面板、卡片内容区这类“需要清晰显示文字和控件”的元素，背景必须彻底断开与父层的 Alpha 混合路径。最直接有效的方式就是用不透明值。
-
background-color: #37374d✅ 完全安全，无任何 Alpha 参与 -
background-color: rgba(55, 55, 77, 1)✅ 等效，显式声明更利于维护 -
background-color: rgba(55, 55, 77, 0.99)❌ 即使只差 0.01，也会触发混合，导致颜色不可预测偏移
注意：opacity: 1 是默认值，但显式写上能防止被上级继承的 opacity 覆盖；如果父层用了 <code>opacity: 0.8，子元素即使写 opacity: 1 也无效——opacity 是 stacking context 级别开关，无法局部解除。
用 isolation: isolate 主动创建独立渲染上下文
当结构无法调整（比如必须父子嵌套，又不能改父层透明度），isolation: isolate 是现代 CSS 中最干净的兜底方案。
- 它为该元素创建新的层叠上下文（stacking context），让其背景渲染完全隔离于父层的透明背景
- 不会影响布局、尺寸或事件流，只干预合成阶段
- 兼容性良好：Chrome 52+、Firefox 36+、Safari 9.1+、Edge 79+
示例：
`.sidedrawer {
background-color: #37374d;
isolation: isolate;
opacity: 1; /* 显式声明，防继承污染 */
}`
⚠️ 不要对 .sidedrawer 再加任何 rgba() 背景或 opacity，否则会绕过 isolation 的保护效果。
需要多层半透效果时，优先用 background-blend-mode
如果目标是可控叠加（比如深色底 + 浅色渐变遮罩），硬叠 rgba() 很容易失饱和、发闷。此时应放弃父子嵌套思路，改用单元素多背景 + 混合模式。
-
background-blend-mode只作用于同一元素的多个背景层，不涉及 stacking context，无意外混合风险 - 支持
multiply、overlay、screen等语义明确的混合逻辑，比反复试alpha值高效得多 - 必须用
background简写，不能用background-color—— 后者不支持多值
示例（一层纯色底 + 一层半透渐变）：
`div {
background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0)), #3498db;
background-blend-mode: multiply;
background-size: 100% 100%, auto;
background-repeat: no-repeat;
}`
真正难的不是算出叠加后的 RGB，而是判断哪一层该“断开混合”。很多时候一个 isolation: isolate 或把父子改成兄弟结构，比调十次 alpha 更快、更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
