使用rgba替代opacity可解决子元素透明问题：当父元素设置opacity时，子元素会继承透明效果；而使用background-color: rgba(0,0,0,0.5)仅让背景半透明，子元素不受影响。需整体透明用opacity，仅背景或边框透明则用rgba，避免透明度“穿透”。
在使用css设置元素透明度时，很多人会遇到子元素也跟着变透明的问题。这是因为 opacity 属性具有继承性，父元素设置后，所有子元素都会继承这一透明效果，无法单独控制。
问题原因：opacity 会继承
当你给一个父元素设置 opacity: 0.5;，即使子元素明确设置为 opacity: 1;，视觉上依然会呈现半透明状态，因为它是基于父级的透明度进行叠加渲染的。
例如：
.parent { opacity: 0.5; } .child { opacity: 1; /* 实际仍受父级影响，不会完全不透明 */ }解决方案：使用 rgba 替代 opacity
如果你只想让背景或某个颜色具有透明效果，而不影响子元素，推荐使用 rgba() 来定义颜色值，这样只作用于该属性本身，不会影响子元素的显示。
立即学习“前端免费学习笔记（深入）”；
rgba() 可用于背景色、边框、文字颜色等，格式为：rgba(red, green, blue, alpha)，其中 alpha 表示透明度（0～1）。
示例：仅背景半透明，内容保持清晰
.parent { background-color: rgba(0, 0, 0, 0.5); /* 黑色背景，50% 透明 */ color: white; } .child { opacity: 1; /* 子元素完全不透明 */ /* 或者不需要额外设置，原本就不受影响 */ }什么时候用 opacity？什么时候用 rgba？
- 需要整个元素及其内容都变透明（比如淡入淡出动画），使用 opacity
- 只需要背景或边框等有透明效果，内容保持清晰，使用 rgba
- 想避免透明度“穿透”到子元素，优先选择 rgba 背景色
基本上就这些。用 rgba 控制颜色层级的透明度，是避免 opacity 继承问题最实用的方法。灵活运用，就能实现更精确的视觉效果。