rgba()只作用于指定颜色属性的alpha通道，opacity则使整个元素及子元素统一变透明；前者是像素级颜色合成，后者是图层级渲染控制。
rgba() 和 opacity 的透明机制根本不同
颜色偏差最常源于把 opacity 当作“调颜色透明度”的通用工具——它实际作用于整个渲染图层，而 rgba() 只改颜色本身的 alpha 通道。前者会让文字、边框、子元素全变淡，后者只影响你指定的那个颜色值。
比如 opacity: 0.5 套在带文字的卡片上，文字灰得看不清；但用 background-color: rgba(0, 0, 0, 0.5)，文字还是黑的，背景才半透。这不是 bug，是合成层级差异：一个在像素级（rgba），一个在图层级（opacity）。
多层 rgba() 叠加不是线性变深，而是指数衰减
两层 rgba(0, 0, 0, 0.2) 堆一起，视觉灰度不是 0.4，而是 0.2 + 0.8 × 0.2 = 0.36。浏览器按公式 result = foreground × alpha + background × (1 − alpha) 逐像素算，不是简单相加。
- 父容器没设背景色（默认
transparent），叠加会偷偷和画布白色混合，导致发灰——务必用 DevTools 拾色器点选验证真实值 - 子元素继承父级
rgba()背景，又自己设rgba()，alpha 实际相乘（0.2 × 0.2 = 0.04），几乎看不见 - Chrome 120+ 的 “Show blended color” 能显示最终合成色，但它不展开
background-blend-mode多层贡献，也不能处理border-color或box-shadow
mix-blend-mode 不是透明度，是像素级混合运算
mix-blend-mode 让元素内容跟背后**已渲染完成的内容**混合，它不改变自身 alpha，但会彻底改写输出。比如 mix-blend-mode: multiply 的白色文字，在浅色图上直接“消失”，这是正常行为，不是配错了。
容易踩的坑：
- 父容器加了
isolation: isolate，子元素就只能跟父容器内容混合，穿不透到外层背景——调试时先检查是否误加 - 想用
mix-blend-mode控制遮罩效果，但元素自带不透明背景，底层内容被挡住，混合失效 -
mix-blend-mode在滚动容器内对子元素无效，必须作用在直接盖住背景的层上
color-mix() 根本不处理透明度
color-mix() 只能混合两个**不透明颜色**，传入 rgba(255, 0, 0, 0.8) 会被静默丢掉 alpha，只取 RGB 部分。它产出的是实心色，不是“半透感”。
常见错误：
- 写
color-mix(in srgb, currentColor 80%, transparent 20%)——transparent不是颜色，整行失效 - 以为
color-mix()能替代background-blend-mode实现蒙层效果，结果只是生成一个固定灰块，无法响应背景变化 - 在旧浏览器里用
in oklch，但 Chrome 111+、Safari 16.4+ 才支持，需 fallback 到lch或srgb
真正要控制透明，老老实实用 rgba()、hsla() 或新语法 color(srgb 0 0 0 / 0.5)；想混合背景与图片，优先用 background-blend-mode + 两个独立背景层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
