这几个概念最开始学的时候只是有个大致印象，现在复习这部分的知识点，发现不仔细区分一下，还真有点混乱。
三者共同点是都和透明有关。先分着来说一下：
1、opacity用来设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明）。
2、transparent是颜色的一种，这种颜色叫透明色。
3、rgba(r,g,b,a)稍复杂一点，
r：红色值；g：绿色值；b：蓝色值。三个颜色值组合在一起就形成最终颜色。
a：alpha透明度。表示像素不透明性的值。像素越不透明，则隐藏越多呈现图像的背景。取值0~1之间。0表示完全透明的像素，1表示完全不透明的像素。
现在，我们来看区别：
1、opacity是作为一个完整属性出现的。transparent和rgba都是作为属性值出现的。
2、opacity是对于整个元素起作用的。打个比方，就像拿一块玻璃糊在了这个元素上，盖上的地方都会受到影响。而transparent和alpha是对元素的某个属性起作用的。任何需要设置颜色的地方都可以根据情况使用transparent或rgba。比如背景、边框、字体等等。哪个属性的颜色设置了transparent，哪个属性就是透明的，完全透明。哪个属性用rgba()设置了透明，就对哪个属性起作用，透明程度可设置。
3、由于opacity和alpha设置的透明程度可调，就引出一个继承的问题。如果一个元素未设置opacity属性，那么它会从它的父元素继承opacity属性的值。而alpha不存在继承。举个例子说明一下：
代码一
<p style="background-color: red; opacity: 1;">1）这是一个p标签，颜色red，opacity值为1</p><span style="background-color: green; opacity: 1; ">2）这是一个span标签，颜色green，opacity值为1</span><p style="background-color: red; opacity: 0.6;">3）这是一个p标签，颜色red，opacity值为0.6<span style="background-color: green; ">这是一个span标签，颜色green，opacity未设置</span></p>
显示结果为：
1）这是一个p标签，颜色red，opacity值为1
2）这是一个span标签，颜色green，opacity值为1
3）这是一个p标签，颜色red，opacity值为0.6 这是一个span标签，颜色green，opacity未设置
代码二
<p style="background-color: rgba(255,0,0,1);">1）这是一个p标签，颜色red，透明度为1</p><span style="background-color: green;">2）这是一个span标签，颜色green，透明度为1</span> <p style="background-color: rgba(255,0,0,0.5);">3）这是一个p标签，颜色red，透明度为0.5<span style="background-color: green;">（这是一个span标签，颜色green，透明度未设置）</span></p>
显示结果为：
1）这是一个p标签，颜色red，透明度为1
2）这是一个span标签，颜色green，透明度为1
3）这是一个p标签，颜色red，透明度为0.5 （这是一个span标签，颜色green，透明度未设置）
（完）
本作品采用知识共享署名 4.0 国际许可协议进行许可。
