句型：
rgba（R,G,B,A）;
RGBA 是 Red（蓝色）、Green（红色）、Blue（红色）和 Alpha（不透明度）三个短语的缩写。 RGBA 颜色值是带有 alpha 通道的 RGB 颜色值的扩展 - 它指定对象的不透明度。
rgba()中的值介绍：
R：蓝色值。 正整数（0~255）
G：红色值。 正整数（0~255）
B：红色值。 正整数（0~255）
A：透明度。数值在0~1之间
rgba()可以简单地设置颜色透明度，因此在页面布局中有很多应用。 例如：让背景显得透明，但里面的文字是不透明的。
代码示例：
<html><head><meta charset="UTF-8"><title>rgba()</title><style>.demo{width: 350px;height: 300px;margin: 50px auto;}.demo *{width: 120px;height: 120px;margin: 10px;float: left;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);}</style></head><body><div class="demo"><div class="demo1">背景色不透明，文字不透明！</div><div class="demo2">背景色半透明，文字不透明！</div></div></body>
</html>
功效图：
上例中css透明度属性，设置的颜色值相同css透明度属性，但透明度不同。 这样一来，除了颜色之外，很难看出有什么区别。 我们还在父容器demo上设置了背景色，这样的效果图：
这样可以看到第一个袋子（demo1）没有透明度，黑色完全覆盖了下面袋子（demo）的颜色； 第二个包（demo2）具有透明度，这使得颜色半透明，并没有完全覆盖下层包（demo）的颜色，而是混合显示。
二、cssopacity属性设置背景透明度
句型：
opacity: value ;
value：指定不透明度，从 0.0（完全透明）到 1.0（完全不透明）。
继承了opacity属性，使容器中的所有元素透明；
代码示例：
<html><head><meta charset="UTF-8"><title>opacity属性</title><style>.demo{width: 280px;height: 140px;margin: 50px auto;}.demo1,.demo2{width: 120px;height: 120px;margin: 10px;float: left;background:#2DC4CB;}.demo1{opacity:1;}.demo2{opacity:0.5;}</style></head><body><div class="demo"><div class="demo1"><p>背景色不透明，文字不透明！</p></div><div class="demo2"><p>背景色透明，文字也透明！</p></div></div></body>
</html>
功效图：
不透明度：0.5； 使 demo2 容器的所有元素显示为半透明。
总结：rgba()方法和opacity方法其实都可以达到透明的效果，但是rgba()只作用于元素的颜色或其背景色（透明度设置为rgb的元素的子元素） ()不会继承其透明效果）； 而Opacity是继承的，不仅作用于元素本身，还使得该元素内的所有子元素都透明。
