rgba()的四个参数依次为红、绿、蓝三色强度（0–255整数）和透明度alpha（0–1小数）；与opacity不同，rgba仅作用于背景色，不影响文字及子元素。
直接用 rgba() 函数设置背景色，就能让背景带透明度，比如 background-color: rgba(0, 0, 0, 0.5); 表示黑色半透明（不透明度 50%）。
rgba 的四个参数是什么意思
rgba 是 red（红）、green（绿）、blue（蓝）、alpha（透明度）的缩写，括号里按顺序填四个值：
- 前三个是 0–255 的整数，代表红、绿、蓝的强度；
- 第四个是 0–1 的小数，代表透明度：0 是完全透明，1 是完全不透明；
- 例如
rgba(255, 0, 0, 0.3)是 30% 不透明的红色，rgba(0, 0, 0, 0.8)是 80% 不透明的黑色。
和 opacity 的区别在哪
opacity 会让整个元素（包括文字、子元素）一起变透明，而 rgba 背景色 只影响背景本身：
- 用
background-color: rgba(0, 0, 0, 0.4);→ 背景半透，文字依然清晰； - 用
opacity: 0.4;→ 整个盒子（含文字、图标等）都变淡，通常不是想要的效果。
兼容性和备用写法
现代浏览器都支持 rgba，IE9+ 也支持。如果要兼容极老版本 IE（如 IE8 及以下），可加一层 fallback：
立即学习“前端免费学习笔记（深入）”；
- 先写一个纯色 background（如
#000），作为降级； - 再写 rgba，后面的会覆盖前面的（CSS 层叠规则）；
- 例如：
background-color: #000;
background-color: rgba(0, 0, 0, 0.5);
