rgb(from...)不能叠加透明度，它仅重置单色alpha值而不参与图层混合；真正叠加需用background层叠、伪元素分层或background-blend-mode。
不能用相对颜色语法实现“透明度叠加”，它只支持透明度重置，不是叠加。想让两层半透色混合出新效果，得用 background 层叠或 blend-mode，而不是嵌套 from。
为什么 rgb(from ...) 不能叠加透明度
rgb(from) 的作用是解构一个已有颜色（含 alpha），再用 calc() 对它的 alpha 做算术运算——比如 calc(alpha - 0.2) 或 calc(alpha * 0.8)。它不感知“下层颜色”，也不参与像素混合，只是把原值改写一遍。
- 写
rgb(from var(--base) r g b / calc(alpha * 0.5))，结果是原色的 alpha 变成一半，不是“和下层混合后变半透” - 连续套两层
from（比如先减 0.3，再减 0.2）不会累加效果，第二层的alpha来自第一层输出值，容易误判原始透明度 - 如果源变量没定义 alpha（如
--base: #09face），from会静默取alpha = 1，但你根本没控制权
真正能叠加透明度的 CSS 方式
浏览器渲染时，“叠加”发生在图层绘制阶段，不是颜色函数内部。要达成视觉上的叠加感，必须让多个带 alpha 的图层共存于同一元素或父子结构中。
- 用
background多层语法：例如background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(...);—— 第一层半透黑盖在图片上 - 用伪元素分层：
::before设background-color: rgba(255,0,0,0.3)，父元素设图片背景，靠z-index和position控制顺序 - 用
background-blend-mode：比如background: #3498db, linear-gradient(rgba(0,0,0,0.6), transparent); background-blend-mode: multiply;，让颜色与渐变按算法混合 - 避免混用
opacity：它会让整个元素（含文字、边框）一起变淡，和“背景叠加”目标冲突
兼容性与降级关键点
相对颜色语法（rgb(from)、hsl(from)）在 iOS 16.4+、Chrome 111+、Firefox 117+ 才稳定支持。旧版 Safari 或安卓 WebView 会直接忽略该声明，回退到初始值。
立即学习“前端免费学习笔记（深入）”；
- 务必提供降级：
background-color: rgba(9, 250, 206, 0.6); background-color: rgb(from var(--brand) r g b / calc(alpha - 0.2)); - HEX8（如
#09face80）虽带 alpha，但无法被from解析——它是原子值，不是可分解的颜色函数 - 别指望
color-mix()替代：它不接受 alpha 输入，也不处理图层混合，只做两种纯色的插值
真正难的是预判多层 alpha 合成后的视觉结果。公式是 result = fg × α + bg × (1 − α)，但人眼对中间灰阶不敏感，调试时一定用 DevTools 颜色拾取器点选最终区域，别信代码里写的 rgba() 值。
