rgba()的透明度仅作用于当前元素的颜色属性，不继承给子元素；子元素保持自身不透明，视觉上的“变透明”是父背景透出造成的错觉。
rgba() 的透明度只作用于当前元素，不直接继承给子元素
用 rgba() 设置父元素背景色或文字颜色时，透明度仅影响该属性所应用的那层绘制（paint layer），子元素默认仍以自身颜色和 opacity 值独立渲染。这不是“继承”，而是图层叠加的结果——浏览器按渲染顺序把父层半透色块画在底层，再把子元素完整画在其上方。
为什么看起来子元素也变透明了？其实是背景透出造成的错觉
常见误解源于视觉混淆：当父元素用 background-color: rgba(0, 0, 0, 0.5)，而子元素是白色文字且无背景时，你会看到「灰黑色背景 + 白字」，但白字本身仍是 100% 不透明的。真正被削弱的是父背景与底层内容之间的对比度，不是子元素的 alpha 值变了。
- 子元素若设置了
background-color（比如rgba(255, 255, 255, 0.8)），它的透明度只影响它自己的背景与更下层内容的混合 - 子元素若没设背景，其区域会透出父元素的 rgba 背景，再往下透出 body 或 canvas 背景，形成多层叠加效果
- 如果父元素同时用了
opacity: 0.5，那整个盒模型（含子元素）都会被统一降为 50% 透明 —— 这和rgba()完全不同
rgba() 和 opacity 的关键区别：作用层级不同
rgba() 是颜色空间内的 alpha 通道控制，只改单个颜色值；opacity 是 CSS 绘制层的全局透明度开关，会影响整个元素及其所有后代的合成结果。二者混用时容易误判原因。
/* 父元素背景半透，子元素文字完全不透明 */
.parent {
background-color: rgba(0, 0, 0, 0.3);
}
.parent .child {
color: #fff; /* 这里是 solid white，alpha=1 */
}
/ 等效但危险：下面这句会让 .child 文字也变淡 /
.parent {
opacity: 0.3; / 错误地用于“让背景透一点”场景 /
}
真要让子元素跟着背景一起“弱化”，得靠 backdrop-filter 或隔离层
单纯靠 rgba() 无法实现子元素随父背景动态调整视觉权重。若需类似毛玻璃、深色模式下文字自动降对比的效果，应考虑：
立即学习“前端免费学习笔记（深入）”；
- 用
backdrop-filter: blur(2px)配合半透背景，让子元素下方区域模糊+变暗，间接提升可读性 - 对子元素单独加
color: hsla(...)并手动调低 lightness/saturation，模拟“被罩了一层”的观感 - 避免依赖视觉错觉做可访问性设计 —— 屏幕阅读器和高对比度模式下，
rgba()的 alpha 对语义毫无影响
实际开发中最容易忽略的点：设计师给的“背景 60% 透明，文字 80% 透明”需求，在 CSS 里根本不是一个 rgba() 能解决的——它本质是两个独立的透明通道，必须分别控制，且要考虑 contrast ratio 是否满足 WCAG 标准。
