rgba()叠加是逐像素Alpha混合而非简单透明度相加，实际灰度为1−(1−α)²；opacity会整体衰减且切断混合路径；background-blend-mode仅作用于同一元素多背景层；mix-blend-mode依赖底层已渲染内容，易受isolation和opacity干扰。
rgba() 叠加不是“颜色变深”，而是逐像素 Alpha 混合
两层 background-color: rgba(0, 0, 0, 0.2) 叠在一起，视觉灰度不是 0.4，而是 1 − (1−0.2)² = 0.36。这是因为第二层混合的对象，是第一层已合成的结果（已含白底），不是原始背景。浏览器不会“叠加透明度”，它只执行一次公式：result = foreground × alpha + background × (1 − alpha)。
常见错误现象：
- 在白色画布上叠两层
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-blend-mode 只作用于同一元素的多个背景层（比如一张图 + 一层纯色），且必须写在单条 background 声明里，用逗号分隔。它不涉及子元素或 stacking context，只做像素级混合。
实操要点：
- 语法必须是
background: url(img.jpg), linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)); background-blend-mode: multiply;，不能拆成两条background-image - 若想让渐变遮罩和图片融合更自然，优先选
multiply或overlay，避免normal（等效于无混合） - 该属性对性能影响极小，现代浏览器兼容性良好（Chrome 35+、Firefox 30+、Safari 7.1+）
mix-blend-mode 穿透依赖已渲染内容，极易被 isolation 截断
mix-blend-mode 让元素内容与其背后**已渲染完成的内容**（父背景、兄弟元素、背景图）混合，它不改变自身 alpha，但会彻底改写视觉输出。前提是：该元素不能有完全不透明的背景遮挡底层。
容易踩的坑：
- 设了
mix-blend-mode: multiply的白色文字，在浅色图上几乎不可见——这是预期行为，不是 bug - 父容器误加了
isolation: isolate，子元素就只能跟父容器内容混合，无法穿透到更外层背景 - 父容器用了
opacity，子元素即使设mix-blend-mode也无效——opacity已把整个 context 输出压低，底层内容不可见
关键提醒：Alpha 混合没有“图层”概念，只有“谁先画、谁后画、谁参与混合”。真正复杂的效果，往往需要同时控制 z-index、isolation、background-blend-mode 和单层 rgba() 的组合，而不是靠堆叠多层半透明。最常被忽略的，是默认画布色（白色）对第一层 rgba() 的隐式污染。
