rgba叠加变脏是因浏览器按result = fg × α + bg × (1 − α)逐像素合成，多层嵌套或非纯白背景导致灰、闷、发雾；解决需用伪元素剥离透明层、避免多重混合。
rgba 颜色叠加后变脏，不是写错了，而是浏览器在按公式 result = fg × α + bg × (1 − α) 逐像素合成时，底层颜色不可避免地参与了上层计算——尤其当多层 rgba 嵌套、或与非纯白背景混合时，灰、闷、发雾就是标准表现。
为什么 rgba 叠加会“变脏”而不是变淡
人眼预期“叠一层半透黑=更暗”，但实际是：第一层 rgba(0,0,0,0.1) 和白色背景混合出浅灰；第二层再叠个 rgba(0,0,0,0.1)，它混合的对象已是浅灰，不是白色——结果是更深的灰，且饱和度暴跌。常见触发点：
- 父容器设
background-color: rgba(0,0,0,0.87)，子元素又设background-color: rgba(255,255,255,0.05)，实际子元素 alpha 等效于0.05 × 0.87 ≈ 0.043，几乎不可见，只剩混浊感 - 用
border: 1px solid rgba(0,0,0,0.2)+background-color: rgba(0,0,0,0.1)，边框和背景各自混合，边缘泛灰 - DevTools 颜色拾取器显示的是最终合成色，直接抄这个值回代码，会导致下一层再叠一次，恶性循环
用伪元素剥离透明层，只合成一次
把透明效果从内容区域抽离到 ::before 或 ::after，确保文字、图片等真实内容始终以 alpha = 1 渲染，避免二次混合：
`.card {
position: relative;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.08); /* ✅ 只和父背景合成一次 */
z-index: -1;
}- 伪元素必须设
z-index: -1，否则可能遮挡内容 - 不要给伪元素加
opacity，它本身已是 rgba 控制，再加 opacity 会触发新层叠上下文，得不偿失 - 若需响应式透明度，用 CSS 变量：
background-color: rgba(0, 0, 0, var(--overlay-alpha, 0.08));
深色模式下别硬搬浅色 rgba 值
rgba(0,0,0,0.1) 在 #ffffff 上是极浅灰，在 #121212 上却像蒙了层雾——因为混合对象从“白”变成了“近黑”，公式里 bg × (1 − α) 项贡献巨大。正确做法：
立即学习“前端免费学习笔记（深入）”；
- 用
@media (prefers-color-scheme: dark)单独定义：background-color: rgba(255, 255, 255, 0.03); - 避免
transparent或rgba(0,0,0,0)作底色，它们在深色模式下常被渲染为意外黑块 - 测试打印输出时，
rgba()会被降级为rgb()或黑，务必在@media print中用background-color: #2c3e50+color-adjust: exact替代
最易被忽略的一点：所谓“干净”的透明效果，从来不是靠堆 rgba 实现的，而是靠明确控制哪一层该透、哪一层必须不透。一旦发现颜色发灰，先检查 computed styles 里有没有多个 rgba 同时生效，再看它们是不是嵌套在同一渲染路径上——问题八成出在这里。
