在CSS里，控制颜色与透明度主要会用到opacity属性和rgba颜色模式。opacity是对整个元素生效的透明设置，而rgba是在颜色值中单独指定透明通道。弄清楚二者的差异并合理搭配，才能写出既美观又稳定的样式。
opacity与rgba的基本区别
opacity属性的取值范围是0到1，0表示完全透明，1表示完全不透明。给它赋值时，元素本身以及里面的所有子元素都会一起变透明。
.box {
opacity: 0.5; /* 整个盒子包括文字都半透明 */
}
rgba中的a就是alpha通道，同样取0到1。它只让当前这条颜色规则变透明，比如背景色，不会波及元素里的文字或其他子节点。
.box {
background-color: rgba(255, 0, 0, 0.5); /* 仅背景半透明，文字清晰 */
}
两者如何结合应用
有时我们希望外层容器整体淡入，同时内部某块背景用rgba做局部透明，这时就可以叠加使用。下面是一个卡片在加载时整体渐显，而卡片头部背景使用rgba控制的例子。
<div class="card"> <div class="card-header">标题</div> <div class="card-body">内容文字</div> </div>
.card {
opacity: 0;
animation: fadeIn 1s forwards; /* 整体淡入 */
}
.card-header {
background-color: rgba(0, 120, 255, 0.6); /* 头部背景半透明 */
color: #fff;
}
@keyframes fadeIn {
to { opacity: 1; }
}
使用注意点
- 用opacity做动画时，子元素无法单独恢复不透明，如需文字清晰请用rgba。
- rgba兼容性良好，但在极旧浏览器中需备用十六进制颜色。
- 嵌套使用opacity会产生相乘效果，例如父0.5子0.5实际透度为0.25。
小结
简单说，opacity管整体，rgba管颜色。实际开发中可让容器用opacity做交互过渡，内部色块用rgba精细控制，这样既能保证视觉效果，也避免文字可读性下降。