rgba() 值因浏览器加权混合而失真，DevTools 拾色器显示的是合成后颜色而非源值；多层透明需拆分为 linear-gradient 或伪元素隔离，避免 alpha 叠乘；优先用 rgba() 控制背景透明，禁用 opacity 全局衰减。
直接用 rgba() 写出来的值，几乎从来不是设计稿里“看起来那样”的最终色——因为浏览器不是在叠透明纸，而是在做加权混合计算。
为什么 DevTools 拾色器显示的色值不能照抄
Chrome / Safari 的拾色器读取的是合成后像素的 RGB 值，不是你写的 rgba(0, 0, 0, 0.3)。它已经混入了父容器背景（如果没设，则是默认白色画布），再被上层元素透过来一次。比如设计稿给的是“黑底上一层 40% 灰遮罩”，你写 background-color: rgba(0, 0, 0, 0.4)，实际渲染出来可能偏紫灰，饱和度掉了一半。
- 务必确认父级是否设置了
background-color；没设 = 和白色画布先混合一次 - 避免在父子嵌套结构中重复使用
rgba()：子元素的 alpha 会与父级相乘（0.4 × 0.6 = 0.24），完全不可控 - 调试时右键检查元素 → “Computed” 面板里看
background-color的实际解析值，比拾色器更可靠
多层半透背景必须用 background: linear-gradient() 拆开写
想模拟“深灰底 + 浅灰遮罩 + 图片纹理”三层叠加？别写 background-color: rgba(...), rgba(...)——这语法非法，浏览器只认第一个。
- 正确写法是：
background: linear-gradient(rgba(0,0,0,0.15), rgba(0,0,0,0.15)), linear-gradient(rgba(30,30,30,0.8), rgba(30,30,30,0.8)), url(./texture.png); - 顺序是“底层 → 顶层”，逗号分隔；最右边的渐变盖在最上面
- 每层都用相同起止色（如
linear-gradient(to bottom, #000, #000)）才能保证是纯色层，避免意外渐变干扰 - 加上
background-size: 100% 100%和background-repeat: no-repeat，防止平铺或拉伸失真
想让文字不透明、背景半透，就只改 background-color 或 background
opacity 是全局衰减开关，一开全糊；rgba() 才是精准控制颜色通道的手术刀。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
opacity: 0.7;→ 文字、边框、图标、阴影全变淡，且无法单独恢复 - 正确写法：
background-color: rgba(55, 55, 77, 0.87);或background: rgba(55, 55, 77, 0.87) url(./bg.jpg) center/cover; - 边框也可以带透明：
border: 1px solid rgba(255, 255, 255, 0.2);，不影响文字清晰度 - 如果已有
background简写声明，后面再写background-color会被覆盖，要合并进简写里
当 RGBA 叠出灰阶崩坏时，优先切层或隔离
越调 alpha 越灰，说明混合路径太长。这时候不该继续微调数值，而该打断混合链。
- 关键 UI 层（如弹窗、侧边栏）强制用不透明背景：
background-color: rgba(55, 55, 77, 1); - 遮罩类效果抽成伪元素：
::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: -1; } - 需要毛玻璃效果时，用
backdrop-filter: blur(4px) opacity(0.7);替代多层rgba()，它只处理背景区域，文字完全不参与混合 - 必要时加
isolation: isolate;创建独立层叠上下文，阻断与父级透明背景的合成
真正难的不是算 alpha 值，而是判断哪一层该“彻底不参与混合”。设计稿里那个“刚好透出一点底纹”的效果，往往靠的是剥离图层，而不是堆叠更多 rgba()。
