当 CSS 自定义属性中定义了带 alpha 的 RGBA 值（如 255, 144, 106, 0.18），直接用 rgb(--color) 解析会丢失 alpha 通道，但浏览器仍按 rgba 解析逻辑处理，导致背景意外半透明——本文提供无需修改原始颜色 token 的兼容性修复方案。
当 css 自定义属性中定义了带 alpha 的 rgba 值（如 `255, 144, 106, 0.18`），直接用 `rgb(--color)` 解析会丢失 alpha 通道，但浏览器仍按 rgba 解析逻辑处理，导致背景意外半透明——本文提供无需修改原始颜色 token 的兼容性修复方案。
在 CSS 中，rgb() 函数仅接受三个参数（R、G、B），不支持 alpha；而 rgba() 才支持第四个 alpha 参数。因此，当你写：
--color: 255, 144, 106, 0.18; background: rgb(var(--color)); /* ❌ 错误：rgb() 忽略第4个值，但解析器可能降级为 rgba() 行为，或触发未定义行为 */
实际效果取决于浏览器实现，常见表现为：背景呈现 rgba(255,144,106,0.18) 的半透明效果——这正是你截图中看到的“变透明”问题。
⚠️ 关键误区：rgb(var(--color)) 并不会自动截断 alpha；CSS 规范中，rgb() 对多余参数的处理是无效声明（部分浏览器会静默转为 rgba() 解析），因此不可靠。
✅ 可靠解法：利用多层背景叠加，将半透明色作为顶层遮罩，底层设置不透明纯色（如 #fff 或 #000）来“抵消”透明感，从而视觉上保留色彩饱和度，同时规避 alpha 影响：
.box {
--color: 255, 144, 106, 0.18;
/* 顶层：rgba 色（保持原 token）；底层：纯白（适配深色内容） */
background:
linear-gradient(rgb(var(--color)) 0 0), /* 等价于 rgba(255,144,106,0.18) */
#fff;
height: 200px;
padding: 1rem;
}
? 原理说明：linear-gradient(color 0 0) 创建一个零高度的纯色图层（性能极佳），与底层纯色堆叠。由于顶层仅有 18% 不透明度，底层白色会透出，最终视觉表现为「柔和的橙红色蒙版」，而非全透明背景——既复用原有 token，又避免父元素 opacity 或 backdrop-filter 等全局透明方案对子内容的副作用。
? 注意事项：
- 若页面背景非纯白，需将底层色（如 #fff）替换为与真实背景匹配的颜色（例如深色主题下用 #1a1a1a）；
- 不推荐使用 opacity: 1 或 background-color: rgb(...) 单独覆盖，因无法解决 rgb() 解析歧义；
- 长期建议升级设计系统：将颜色 token 拆分为 --color-rgb: 255, 144, 106 和 --color-alpha: 0.18，便于灵活组合 rgba(var(--color-rgb), var(--color-alpha))。
此方案零侵入、高兼容（支持所有现代浏览器），且完全遵守“不可修改 color token”的约束条件。
