1.transparent的用法：在color、border-color、background的场景，意思为透明。只会是元素的背景色为透明的，元素里面的其他元素或内容都没有影响。

例子：

<div class="box">

        <p>111111</p>     </div>

.box{

            width: 200px;             height: 200px;             background: transparent; /*设置不透明度，背景发生改变,字体不变*/             color: red;  /*字体颜色*/  }

2.opacity的用法：设置元素的不透明级别，从 0.0 （完全透明）到 1.0（完全不透明） 在使用opacity时，不仅使得元素的背景透明，连其子元素和内容都会变透明。也就是说背景和字体颜色同时发生改变。

例子:

<div class="box">

        <p>111111</p>  </div>

.box{

            width: 200px;             height: 200px;             background: green;  /*背景颜色*/             opacity: .5; /*设置不透明度，背景和字体颜色也发生改变*/             color: red;  /*字体颜色*/  }

3.rgba是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。这里仅仅是背景透明了，框内的文字并没有继承该属性。也就是说设置不透明度，背景发生改变,字体不变。

例子：

<div class="box">

        <p>111111</p>   </div>

.box{

            width: 200px;             height: 200px;             background: rgba(100,150,200,.5); /*设置不透明度，背景发生改变,字体不变*/             color: red;  /*字体颜色*/  }