rgba是CSS中表示颜色的一种方式，它在传统RGB颜色模式的基础上增加了一个alpha通道，用来控制颜色的透明程度。很多刚接触前端的朋友会把rgba和opacity混为一谈，实际上两者的作用范围完全不同：rgba可以让某个具体的颜色呈现半透明，比如只让背景变透明而文字保持清晰；而opacity一旦设置，整个元素连同其内部的所有内容都会一起变透明。理解这个差异是用好rgba的第一步。
rgba的基本语法与参数含义
rgba是Red（红）、Green（绿）、Blue（蓝）、Alpha（透明度）四个单词的首字母缩写。它的语法结构非常简单：rgba(r, g, b, a)，前三个参数分别表示红、绿、蓝三个颜色通道的取值，第四个参数表示透明度。颜色通道可以使用0到255之间的整数，也可以使用百分比形式，例如rgba(255, 0, 0, 0.5)和rgba(100%, 0%, 0%, 0.5)表示的是同一种半透明红色。
alpha参数的取值范围是0到1之间的小数：0表示完全透明，元素的颜色完全看不见；1表示完全不透明，就是普通的实色；0.5则表示一半的透明度。下面是一个基础的示例：
/* 背景为半透明黑色，文字不受影响 */
.overlay {
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
}
/* 完全透明，等同于不设置背景 */
.hidden-bg {
background-color: rgba(255, 255, 255, 0);
}
需要特别注意的是，alpha值写0.5和写.5在CSS中都是合法的，但建议保持书写习惯一致，使用带前导零的写法，这样代码可读性更好，也方便团队协作时的代码审查。
rgba与opacity的区别：为什么推荐rgba
opacity是CSS的一个独立属性，它作用于整个元素及其所有子元素。假设你给一个卡片容器设置了opacity: 0.5，那么卡片里的标题、正文、按钮全部都会变成半透明，这在大多数场景下并不是我们想要的效果。
而rgba只是一个颜色值，可以应用在background-color、color、border-color、box-shadow等一切接受颜色值的属性上，影响范围仅限于这个颜色本身。举个典型的对比例子：
/* 写法一：opacity，文字也会变透明，阅读性差 */
.card-a {
background-color: #333;
opacity: 0.5;
color: #fff;
}
/* 写法二：rgba，只有背景是半透明的，文字清晰 */
.card-b {
background-color: rgba(51, 51, 51, 0.5);
color: #fff;
}
两种写法在视觉上差异非常明显。写法一中的白色文字会跟着背景一起半透明，叠在浅色页面上几乎看不清；写法二中的文字依然是纯白色，只有背景透出了下层内容。因此在做弹窗遮罩、卡片悬浮层、导航栏毛玻璃底色这类需求时，rgba几乎是唯一合理的选择。
另外一个细节是层叠上下文的问题。设置了opacity小于1的元素会创建新的层叠上下文，可能影响内部定位元素的层级表现，而rgba颜色值不会产生这个副作用，这也是它更安全的佐证之一。
rgba的常见应用场景与代码示例
第一个经典场景是遮罩层。在弹出模态框时，通常需要在页面上盖一层半透明黑色，让用户的注意力集中到弹窗内容上：
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999;
}
第二个场景是按钮悬浮态的渐变过渡。利用CSS过渡属性，可以让按钮在鼠标移入时平滑地从半透明背景过渡到实色背景：
.btn {
padding: 10px 24px;
border: 1px solid #1890ff;
color: #1890ff;
background-color: rgba(24, 144, 255, 0);
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: rgba(24, 144, 255, 0.35);
color: #fff;
}
第三个场景是线性渐变中的透明过渡。rgba常与linear-gradient配合，做出从某种颜色渐变到透明的效果，常用于图片上的文字渐隐遮罩：
.banner-text {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.65) 100%
);
}
浏览器兼容性与hex写法的等价形式
rgba属于CSS Color Level 3规范，主流浏览器很早就已经全面支持，包括IE9及以上版本，在今天的开发环境中完全可以放心使用。如果你需要兼容更古老的环境，可以考虑用一个实色背景做降级方案，也就是先写一行普通颜色，再写rgba那一行，老的浏览器不认识rgba就会忽略它。
值得一提的是，现代CSS还支持8位十六进制颜色写法，即在传统的六位hex值后面追加两位十六进制的透明度，例如#ff000080等价于rgba(255, 0, 0, 0.5)。两种写法效果完全一致，选择哪一种主要看团队的代码风格约定。不过hex写法的透明度部分不够直观，0.5对应80，0.3对应4D，需要查表或换算，而rgba的0.5一眼就能看懂，所以从可读性角度来说，rgba在多数团队中仍是首选。
最后提醒一个常见的坑：rgba中的alpha只在当前颜色值上生效，不会被继承。如果父元素设置了半透明的背景色，子元素并不会因此获得任何透明特性，它们各自的颜色需要单独声明。搞清楚这一点，你在使用rgba时就不会出现预期之外的显示效果了。