opacity
设置元素的不透明度
取值范围：0-1；其中
opacity：0； //元素完全透明（即元素不可见）【盒子和盒子的内容都看不见】
opacity：1； //元素完全不透明（即元素后面的背景不可见）
opacity：0.5； //元素完全半透明（即元素后面的背景可见） 【取值0.0~1.0之间】
当opacity属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的opacity属性值。
transparent
【盒子的背景看不见】
颜色的一种，用来指定全透明色彩，即一个类似rgba(0,0,0,0)这样的值
查看：
transparent · CSS3开发文档 · 看云
<color> - CSS（层叠样式表） | MDN
RGBA
rgba是代表Red（红色）Green（绿色）Blue（蓝色）和Alpha的色彩空间。
a 表示像素不透明性的值，取值0~1之间。0表示完全透明的像素，1表示完全不透明的像素。
区别：
1、opacity是作为一个完整属性出现的。transparent和rgba都是作为属性值出现的。
2、opacity是对整个元素起作用的。transparent和rgba是对元素的某个属性起作用的。
3、opacity和rgba设置的透明度可调（取值0-1之间）。若一个元素未设置opacity属性，那么它会从它的父元素继承opacity属性的值。而rgba不存在继承。
简单总结下opacity、transparent以及rgba - Francis_Li - 博客园
