父元素设置 opacity 会影响所有子元素的透明度，导致颜色发虚；应改用 rgba() 或 hsla() 单独控制背景透明，确保子元素颜色清晰。示例：.parent 使用 background-color: rgba(0,0,0,0.5) 实现半透明背景，.child 文字和背景保持完全不透明。对比可知，opacity 影响整体，rgba 仅影响背景。其他方案包括 hsla、CSS 自定义属性或伪元素分离背景与内容。关键：局部透明用 rgba 更精准。
当父元素设置了透明度（如 opacity: 0.5），其所有子元素的颜色都会继承这种透明效果，即使子元素自身设置了颜色，也会显得发虚或变淡。这是因为 opacity 会影响整个元素及其内容的透明度，包括文字、背景、边框等。
解决这个问题的关键是：避免使用父级的 opacity，改用 rgba() 来独立控制背景色或其他属性的透明度，从而让子元素保持清晰和原有的颜色表现。
使用 rgba() 控制背景透明度
如果你只想让父元素的背景半透明，而不影响子元素，应该用 rgba() 设置背景色，而不是用 opacity。
- rgba 的格式为：rgba(红, 绿, 蓝, 透明度)，其中前三个值是颜色，第四个是透明通道（0~1）
- 这样背景可以是半透明的，但文字和子元素仍保持完全不透明
示例代码：
立即学习“前端免费学习笔记（深入）”；
.parent {
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑背景 */
/* 不设置 opacity */
}
<p>.child {
color: white; /<em> 子元素文字依然清晰 </em>/
background-color: blue; /<em> 子元素背景不受影响 </em>/
}</p>对比：opacity 与 rgba 的区别
- opacity: 0.5：整个元素及其所有后代都变为 50% 透明，无法单独恢复子元素的不透明
- background-color: rgba(0,0,0,0.5)：只有背景是半透明，内容（文字、子元素）保持原样
其他可用方案
除了 rgba，还可以考虑：
- hsla()：类似 rgba，但使用色相、饱和度、亮度表示颜色，适合需要调整色调的场景
- CSS 自定义属性 + rgba：便于统一管理透明背景色
- 伪元素实现背景：将半透明背景放在伪元素上，内容层完全独立
基本上就这些。关键点是：想控制局部透明时，别用 opacity，用 rgba() 或 hsla() 更精确，能有效避免子元素颜色被“拉低”。
