rgba和opacity是CSS中用于控制元素颜色和透明度的两个属性。
1. rgba属性
rgba是CSS中的一种颜色值，用于定义颜色和透明度（alpha通道）。它扩展了传统的RGB颜色模型，增加了一个额外的透明度（alpha）分量。
格式：color: rgba(red, green, blue, alpha); 即 color: rgba(0, 0, 0, .5);
-
red、green、blue：分别代表红色、绿色和蓝色分量的值，范围从0到255。 -
alpha：代表透明度的值，范围从0（完全透明）到1（完全不透明）。 -
使用场景：
-
当需要创建具有透明效果的颜色时。
-
在需要层叠元素并控制它们透明度的界面设计中。
-
-
注意事项：
-
rgba颜色值在不同浏览器的兼容性可能有所不同，尤其是在较旧的浏览器中。 -
在某些情况下，
rgba可能不如使用opacity属性性能好，因为rgba可能会影响元素的层级和某些浏览器的硬件加速。
-
2. opacity属性
opacity属性用于设置元素的透明度，它的值在0（完全透明）到1（完全不透明）之间。
格式：opacity: value; 即 opacity: .5;
-
value：透明度值，是一个0到1之间的数字。 -
使用场景：
-
当需要改变整个元素的透明度，包括元素内的所有内容（文本、图片等）。
-
在创建模态窗口、提示框或者任何需要渐变显示/隐藏的UI组件时。
-
-
注意事项：
-
设置
opacity为0会使元素透明，但不会影响元素的布局占位。这意味着即使元素看起来看不见，它仍然会占据空间。 -
opacity的值可以是小数，提供更精细的透明度控制。 -
在使用
opacity时，应该注意它会影响元素及其所有子元素的透明度。
-
两者对比：
-
性能：在某些情况下，使用
rgba可能会导致性能问题，因为它可能会阻止浏览器使用硬件加速。而opacity通常对性能影响较小。 -
兼容性：
opacity属性在所有现代浏览器中都有良好的支持，而rgba在一些非常旧的浏览器中可能不被支持。 -
应用范围：
rgba只影响颜色的透明度，而opacity影响整个元素的透明度。 -
继承性：
opacity可以被继承，而rgba定义的颜色值不会被继承。
在实际使用中，选择rgba还是opacity取决于具体的需求和上下文。如果只需要改变颜色的透明度，使用rgba；如果需要改变整个元素的透明度，包括所有子元素，使用opacity。