RGBA叠加是逐层Alpha混合而非颜色相加，公式为最终颜色=源颜色×源alpha+目标颜色×(1−源alpha)，具有方向性且结果需用开发者工具验证。
RGBA 叠加不是“颜色相加”，而是逐层 Alpha 混合
浏览器渲染重叠的半透明元素时，并不把两个 rgba() 值简单加总（比如 rgba(255,0,0,0.5) + rgba(0,0,255,0.5) ≠ 紫色），而是按“源在上、目标在下”的顺序，用 Alpha 混合公式逐层计算：
最终颜色 = 源颜色 × 源 alpha + 目标颜色 × (1 − 源 alpha)
这个过程是**有方向性**的：上层决定“自己透多少、让下层露多少”，下层只提供被透出的部分。
- 两层
rgba(0,0,0,0.2)重叠，视觉效果≈rgba(0,0,0,0.36)（不是 0.4），因为第二层只混合了第一层已合成的结果 - 若上层是
rgba(255,0,0,0.3)、下层是rgba(0,0,255,0.8)，红色占比仅 30%，其余 70% 是对下层的采样——而下层本身只有 80% 不透明，所以最终蓝成分实际为 0.7 × 0.8 = 56% 的原始蓝色 - 用浏览器开发者工具的“颜色拾取器”点选叠加区域，看到的才是真实合成值；靠肉眼或直觉估算容易偏差
opacity 和 rgba() 混合行为完全不同，别混用
opacity 改变的是整个图层的输出 alpha 值，影响所有子内容；而 rgba() 只作用于某一个颜色属性（如 background-color 或 color）。这意味着它们参与混合的层级和时机根本不同。
- 嵌套两个
opacity: 0.5的 div，整体透明度是 0.25（乘积效应），文字、边框、阴影全变淡，可读性崩坏 - 用
background-color: rgba(0,0,0,0.5)则只让背景透，文字保持 100% 不透明，适合模态框遮罩、卡片浮层等场景 - 如果必须用
opacity（比如做淡入动画），请确保它只用于独立容器，且内部文本/按钮等关键元素不依赖其父级透明度来维持可读性
mix-blend-mode 不是透明度，而是像素级混合运算
mix-blend-mode 让元素内容与其**背后已渲染的内容**（父容器背景、背景图、甚至更下层的兄弟元素）按指定算法混合，它不改变自身透明度，但会显著改变视觉结果。前提是：该元素不能有完全不透明的背景遮挡底层。
- 设
mix-blend-mode: multiply的白色文字在浅色图上几乎消失，在深色图上才显现——因为 multiply 是“变暗”模式，白×任何色≈该色本身 - 想让标题融入背景图？先确保文字无背景色（
background-color: transparent），再设mix-blend-mode: screen或overlay，否则纯色背景会挡住混合对象 - 注意
isolation: isolate可能阻断混合链：若父容器设了该属性，子元素就只能跟父容器内容混合，无法穿透到更外层背景
伪元素叠加比多层 div 更可控，但 z-index 和 pointer-events 得手动管
用 ::before 或 ::after 创建覆盖层，本质是新增一个独立的、可精准定位的渲染层，避免 DOM 层级污染和意外继承。但它不会自动“让位”给内容——需要显式控制堆叠与交互。
立即学习“前端免费学习笔记（深入）”；
- 伪元素背景用
rgba()，内容用z-index: 2，伪元素设z-index: 1并加position: absolute，否则可能盖住文字 - 默认伪元素会响应鼠标事件，若只是视觉遮罩，加上
pointer-events: none，避免干扰点击区域 - 不要写
background: rgba(0,0,0,0.5), url(img.jpg)这种多背景叠加——它只在单个背景层内混合，无法实现“图+色块+文字”三级混合，真要复杂效果还是得靠伪元素分层
Alpha 混合不是魔法，是确定性数学；但它的方向性、层级依赖和浏览器渲染管线的介入，让结果常常反直觉。最稳妥的做法：小范围测试 + 开发者工具颜色拾取 + 在深/浅/图三种背景上都过一遍——透明度设计里，眼见为实，计算为据。
