opacity 作用于元素整体，包含子元素；rgba 仅作用于当前元素的背景或边框颜色。选择时若需半透明背景且保持子元素不透明，使用 rgba；若需整体（包括文字）变淡，使用 opacity。
opacity 对子元素的影响机制是什么
opacity 属性会将整个元素及其所有后代视为一个单一的渲染层，透明度设置会向下传递。这意味着如果父容器设置了 opacity: 0.5，其内部的文字、图片等子元素也会继承这 50% 的透明度，无法单独恢复为完全不透明。这种特性在处理需要整体淡化效果（如遮罩层、非活跃状态组件）时非常有用，但在需要保留子元素清晰度的场景下则会造成干扰。
div {
width: 200px;
height: 200px;
background-color: #3498db;
opacity: 0.5; /* 背景和文字都变淡 */
}
p {
color: white; /* 文字依然受 opacity 影响，显示为半透明白色 */
}
rgba 如何独立控制背景透明度
rgba 是 color 属性的扩展值，通过指定 Alpha 通道（第四个参数）来控制颜色的透明度。它只影响应用了该颜色的具体 CSS 属性（如 background-color 或 border-color），不会影响元素内的文本内容或其他子元素的渲染。这使得开发者可以精确地让背景“隐形”而保持前景内容清晰，是实现卡片悬浮效果、模态框背景层的标准做法。
立即学习“前端免费学习笔记（深入）”；
.card {
background-color: rgba(52, 152, 219, 0.5); /* 仅背景半透明 */
color: black; /* 文字保持完全不透明 */
}当同时使用 opacity 和 rgba 时结果如何
当两者同时存在时，透明度计算是累积的。最终的不透明度等于父级 opacity 值乘以子级 rgba 的 Alpha 值。例如，父容器 opacity: 0.5，内部元素背景 rgba(..., 0.8)，则最终背景可见度为 0.4。这种叠加行为在复杂嵌套结构中容易导致预期外的视觉变暗，调试时需逐层检查 Alpha 值的乘积。
