CSS中不存在独立的“图层叠加”概念，所有叠加效果本质是浏览器按Alpha混合公式逐像素计算的结果：结果色=源色×源透明度+背景色×(1−源透明度)，rgba()、opacity、background-blend-mode、mix-blend-mode四者工作层级不同，混用易出错。
直接说结论：CSS里没有“图层叠加”这个独立概念，所谓叠加效果，本质是浏览器按 Alpha 混合公式逐像素计算出来的结果；你调的不是图层，是混合时机和参与对象——rgba()、opacity、background-blend-mode、mix-blend-mode 四者根本不在同一层工作，混用必出错。
rgba() 叠加 ≠ 颜色相加，而是 foreground × alpha + background × (1 − alpha)
这是最常被误解的一点。写两个 div，都设 background-color: rgba(0, 0, 0, 0.2)，叠在一起，你以为灰度是 0.4，实际是 0.36（因为 1 − (1−0.2)² = 0.36）。原因在于第二层混合的对象，是第一层已合成的结果，不是原始背景。
常见错误现象：
- 两层
rgba(255, 0, 0, 0.3)盖在白色背景上，结果红得发粉、不饱和——因为每次混合都掺入了白色 - 父容器没设
background-color，子元素用rgba()，DevTools 拾色器显示的却是偏亮的灰——它已和默认画布白混合过了 - 用
getComputedStyle(el).backgroundColor拿值，发现永远不带 alpha——该 API 只返回元素自身声明的颜色，不反映叠加后的真实输出
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 调试时务必用 DevTools 的拾色器点选最终像素，而不是抄代码里的
rgba()值 - 若要精准复现设计稿色值，先确认父级背景色（别留
transparent），再手动套公式计算 - 想加深遮罩效果，优先用单层
rgba(0,0,0,0.6)，而非堆两层0.3
opacity 嵌套会乘积衰减，且无法单独作用于背景
opacity 不是颜色属性，它是整个 stacking context 的输出透明度开关。一旦设了 opacity: 0.5，文字、边框、子元素、阴影——全按 0.5 衰减，且子元素再设 opacity: 0.5，结果就是 0.25。
使用场景有限但明确：
- 模态框淡入动画（整块区域统一渐变）
- 禁用态视觉反馈（按钮整体变灰）
但以下情况必须避开 opacity：
- 只想让背景透、文字保持 100% 清晰 → 改用
background-color: rgba(0,0,0,0.6) - 内部有可点击区域（如关闭按钮、输入框）→ 必须显式重置
opacity: 1，否则交互失效 - 父容器用了
opacity，又希望子元素内容跟更外层背景混合 → 不可能，opacity切断了mix-blend-mode的穿透路径
background-blend-mode 是唯一可控的“多背景叠加”方案
它只作用于同一元素的多个背景层（比如一张图 + 一层纯色），且必须写在单条 background 声明里，用逗号分隔。分离写 background-color 和 background-image，background-blend-mode 直接失效。
关键约束：
- 必须至少两个背景层，否则无混合对象
- Safari 15.3 及更早版本完全忽略该属性（包括
normal） - 不能让背景和文字混合——那是
mix-blend-mode的事
推荐组合：
-
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url(img.jpg); background-blend-mode: overlay;→ 蒙层压图，保细节 -
background: #fff, url(pattern.png); background-blend-mode: multiply;→ 浅底+灰纹，压暗不抢主图
注意：background-blend-mode 的值个数可以少于背景层数（缺省补 normal），但若写了多个，必须与图层数一一对应。
mix-blend-mode 依赖已渲染内容，且极易被 isolation 截断
mix-blend-mode 让元素内容（文字、伪元素、子元素）与其背后**已经完成渲染的内容**混合，比如父容器背景、兄弟元素、甚至 body 背景。但它不改变自身 alpha，只改写像素输出。
典型陷阱：
- 父容器写了
isolation: isolate→ 子元素只能跟父容器内容混合，无法穿透到更外层——这是最常被忽略的“没效果”原因 - 元素自带不透明背景（如
background: white）→ 底层内容被完全遮住，混合无从发生 - 白色文字设
mix-blend-mode: multiply，在浅色图上消失 → 正常行为，不是 bug，multiply 就是越亮越不可见
安全用法：
- 去掉所有不必要的
isolation - 确保混合源（底层）和目标（当前元素）之间没有不透明遮挡层
- 深色模式适配时，优先用 CSS 变量控制
background-color，而非依赖mix-blend-mode硬凑
Alpha 混合不是魔术，它是确定性计算。真正难的不是写对语法，而是判断哪一层该介入、哪一层该隔离——浏览器不会替你决定混合顺序，它只忠实地执行你指定的公式和上下文。
