应使用rgba()或hsla()而非opacity来避免颜色偏差，因opacity影响整个元素及其子元素的透明度，而rgba()可单独控制背景色透明度，保持文字清晰。例如：background-color: rgba(255, 0, 0, 0.5)仅使背景半透明，文字不受影响；opacity: 0.5则导致整体变淡，尤其在浅色背景下易模糊。推荐场景：仅背景透明用rgba()，整体融合如弹窗淡出才用opacity。rgba()兼容IE9以上，亦可通过伪元素+rgba实现毛玻璃效果，确保内容清晰与视觉层次。
在使用CSS设置元素透明度时，很多人习惯用opacity属性。但opacity会同时降低整个元素及其所有子元素的透明度，不仅影响背景色，还会让文字、边框等颜色变淡，造成视觉上的颜色偏差。
解决这个问题的关键是：不要用opacity来控制颜色的透明度，而是使用rgba()或hsla()来独立设置颜色的透明通道。
使用 rgba() 控制背景色透明度
通过rgba(r, g, b, a)可以精确设置颜色的红、绿、蓝分量以及透明度（alpha值），这样只影响背景色，不会干扰文字或其他内容。
- r：红色值（0-255）
- g：绿色值（0-255）
- b：蓝色值（0-255）
- a：透明度（0.0 完全透明 到 1.0 完全不透明）
示例：
立即学习“前端免费学习笔记（深入）”；
.element {
background-color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
color: #333; /* 文字保持清晰，不受透明影响 */
}
对比 opacity 和 rgba 的效果差异
如果使用opacity: 0.5，整个元素包括文字都会变模糊、颜色发灰，尤其在浅色背景下容易看不清。
而用background-color: rgba(255, 255, 255, 0.5)，只有背景半透明，文字依然清晰锐利。
推荐做法：
- 需要只让背景透明 → 使用
rgba() - 需要整体视觉融合（如弹窗淡出）→ 才使用
opacity - 想兼容IE9以上？
rgba完全支持，放心使用
其他替代方案：backdrop-filter 或伪元素
在需要毛玻璃效果或更复杂透明背景时，可结合伪元素 + rgba 背景实现隔离。
.overlay::before {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.3);
z-index: -1;
}
这样主内容不受透明影响，结构更清晰。
基本上就这些。颜色偏差问题大多源于误用opacity，改用rgba后能精准控制，界面看起来更专业。
