为什么CSS的rgba透明后文字也发灰
文字发灰主因是rgba()用在父容器background-color时未切断混合路径，导致文字所处背景环境被白色画布和半透层双重混合，视觉上灰软不锐利；正确做法是仅对目标颜色属性单独使用rgba()或用伪元素隔离背景。
文字发灰不是 rgba() 的问题，而是你把它用在了错误的位置——rgba() 本身不会让文字变灰，但如果你把 rgba() 用在父容器的 background-color 上，同时又没切断混合路径，文字就会被底层白色画布“偷偷混合”一次，再被上层半透背景再混合一次，最终观感就是灰、软、不锐利。
为什么 background-color: rgba() 会让文字看起来发灰？
这不是文字颜色被改了，而是浏览器合成时多了一次“和白色画布混合”。当你没给父容器设 background-color（即留空或写 transparent），它的背景默认和白色画布合成；而你写的 background-color: rgba(0, 0, 0, 0.1) 又会在这基础上再叠一层——文字虽是 color: #000，但它渲染时所处的“背景环境”已经不是纯白，而是带灰调的中间色。
DevTools 拾色器点文字看到的 rgba(0, 0, 0, 0.92) 这类值，就是这种双重混合后的结果，不是你写的原始值。
- 父容器没设
background-color→ 默认和白色画布混合 → 第一次发灰 - 子元素有
background-color: rgba()或继承了透明背景 → 再参与一次 alpha 混合 → 第二次稀释饱和度 - 文字本身没加
opacity，但所处图层已非原始对比环境 → 视觉上“发灰”“发虚”
rgba() 和 opacity 混用会放大灰阶崩坏
opacity 是图层级控制，rgba() 是像素级颜色控制。两者混用等于让文字经历两轮独立透明混合：第一轮是父级 opacity 把整个盒压暗，第二轮是 rgba() 背景再次与这个已被压暗的环境合成。
典型错误场景：
- 卡片容器设了
opacity: 0.95做悬停反馈，里面文字立刻变软 - 导航栏用
background-color: rgba(255, 255, 255, 0.8)，又在子菜单上加opacity: 0.9→ 文字边缘模糊、hover 效果弱到看不见 - 按钮用了
background: rgba(0, 123, 255, 0.6)，同时父级 wrapper 有opacity: 0.98→ 实际按钮背景等效于rgba(0, 123, 255, 0.588)，但文字也同步衰减
真正该用 rgba() 的地方，只有一处
只对你要控制透明度的那个颜色属性单独使用 rgba()：
- 背景：用
background-color: rgba(0, 0, 0, 0.15)，别碰opacity - 边框：用
border-color: rgba(100, 100, 100, 0.2)，不是opacity+ solid border - 阴影：用
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)，它天然隔离，不拉低文字对比度 - 文字：慎用
color: rgba(0, 0, 0, 0.8)—— 它会让文字依赖背景，浅图上尚可，深图上直接看不清
如果目标是「背景透、文字锐」，最稳的结构永远是：position: relative 容器 + ::before 伪元素承载 background: rgba() + 主内容层保持 color: #000 和 solid 背景（哪怕透明）。
容易被忽略的关键点
伪元素的 z-index: -1 不仅是为了垫底，更是为了确保它只和父容器的背景（而非子内容）合成；isolation: isolate 能强制断开混合链，但会创建新层叠上下文，可能影响 z-index 逻辑；而 backdrop-filter: opacity(0.7) 看似方便，实则在滚动容器内失效——这些细节不验证，光调 alpha 值毫无意义。
