1. rgba与opacity的作用
在CSS中，我们经常需要设置元素的透明度，以实现某些特定的效果。rgba和opacity都是CSS中常用的设置透明度的方法。
rgba是一种新的颜色值表示方式，它可以在红、绿、蓝和透明度之间进行取值。通过设置rgba的透明度值，我们可以控制元素的透明度，使其变得半透明或者完全透明。
/* 使用rgba设置透明度 */
background-color: rgba(255, 0, 0, 0.5);
opacity是CSS3中添加的属性，可以直接设置元素的透明度值，取值范围为0到1，0表示完全透明，1表示完全不透明。
/* 使用opacity设置透明度 */
opacity: 0.5;
2. rgba与opacity的区别
2.1 透明度叠加效果
通过使用rgba设置元素的背景色的透明度，可以实现元素背景色与其父元素或者其他元素的背景色的叠加效果。这种叠加效果可以使页面元素看起来更加丰富多样。
/* 父元素设置背景色 */
background-color: rgba(255, 0, 0, 0.5);
/* 子元素设置背景色 */
background-color: rgba(0, 255, 0, 0.5);
使用opacity设置元素的透明度时，元素的背景色和内容都会受到影响。而使用rgba设置透明度时，只有背景色受到影响，内容不受影响。
2.2 透明度对子元素的影响
使用opacity设置元素的透明度时，不仅会影响元素本身的透明度，还会影响元素内部所有子元素的透明度。
/* 父元素设置透明度 */
opacity: 0.5;
/* 子元素设置背景色 */
background-color: rgba(0, 0, 255, 0.5);
而使用rgba设置元素的透明度时，只会影响元素本身的透明度，不会继承父元素的透明度。
2.3 兼容性
opacity在各个主流浏览器中都有良好的兼容性，包括IE8+。
而rgba在IE8及其以下版本不被支持，所以如果需要兼容低版本的浏览器，最好使用opacity来设置透明度。
3. 总结
通过以上对rgba和opacity的比较，可以得出以下结论：
rgba可以实现背景色透明度的叠加效果，而opacity会使元素及其子元素的背景色和内容都变得透明。
opacity会影响所有子元素的透明度，而rgba只会影响元素本身的透明度。
opacity在各个主流浏览器中都有良好的兼容性，而rgba在IE8及其以下版本不被支持。
综上所述，根据具体的需求和兼容性要求，选择合适的方法来设置元素的透明度。