一、cssrgba()设置色彩通明度
语法：
rgba（R,G,B,A）;
1
RGBA是代表Red（赤色）Green（绿色）Blue（蓝色）和Alpha（不通明度）三个单词的缩写。RGBA色彩值是RGB色彩值的扩展，带有一个alpha通道-它规则了对象的不通明度。
rgba（)里的值的介绍：
R：赤色值。正整数（0~255）
G：绿色值。正整数（0~255）
B：蓝色值。正整数（0~255）
A：通明度。取值0~1之间
rgba()只是单纯的可以设置色彩通明度，这样在页面的布局中有很多使用。比如说：让布景呈现通明效果，但上面的文字不通明。
代码实例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>rgba()</title>
<style>
.demo{
width:350px;
height:300px;
margin:50pxauto;
}
.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>
<divclass=”demo”>
<divclass=”demo1″>背景色不透明，文字不透明！</div>
<divclass=”demo2″>背景色半透明，文字不透明！</div>
</div>
</body>
</html>
效果图：
在这里插入图片描绘上例中，设置的色彩值是相同的，只是通明度不同。这样看不出来有除了色彩之外的不同，咱们在父容器demo上也设置一个布景色，这样的效果图：
在这里插入图片描绘这样就可以看出：第一个盒子（demo1）没有设置通明度，赤色彻底把下面盒子（demo）的色彩给覆盖住了；第二个盒子（demo2）设置了通明度，使得色彩半通明，没有把下面盒子（demo）的色彩给彻底覆盖，而是混合显示了。
二、cssopacity特点设置布景通明度
语法：
opacity:value;
1
value：指定不通明度，从0.0（彻底通明）到1.0（彻底不通明）。
opacity特点具有继承性，会使容器中的所有元素都具有通明度；
代码实例：
<!DOCTYPEhtml>
<html>
<head>
<metacharset=”UTF-8″>
<title>opacity属性</title>
<style>
.demo{
width:280px;
height:140px;
margin:50pxauto;
}
.demo1,.demo2{
width:120px;
height:120px;
margin:10px;
float:left;
background:#2DC4CB;
}
.demo1{
opacity:1;
}
.demo2{
opacity:0.5;
}
</style>
</head>
<body>
<divclass=”demo”>
<divclass=”demo1″>
<p>背景色不透明，文字不透明！</p>
</div>
<divclass=”demo2″>
<p>背景色透明，文字也透明！</p>
</div>
</div>
</body>
</html>
属性opacity详解
.transparent_class
{
filter:alpha(opacity=50);
opacity:0.5;
}
opacity:0.5;这是最重要的，因为它是CSS标准.该特点支持firefox,Safari和Opera.
filter:alpha(opacity=50);这个是为IE6设的，可取值在0-100，其它三个0到1.
CSS通明度承继问题
但CSS的通明特点涉及到一个承继问题，当为父级元素设置通明度后，子元素将主动承继其通明度，比方本站的一个效果:
csstransparentinheirtCSS通明特点详解即使你又为子元素指定通明度为1也是无效的。
对于子元素是文字的状况，我的解决办法一般是如果多少还能够看清，就不论。另一个折衷的办法是，为文本子元素指定一个相对更深的色彩。也便是说，当子元素承继通明度后，所得到的文本色彩正好便是你想要的。前提是，这个色彩还有加深的可能，和需求详细的核算色彩和通明度的值。
还有“撤销通明度承继”的说法，这个说法是不太精确的，据我个人所知，没有任何撤销通明度承继的办法。只能说，当想要完成“多个元素掩盖，只让指定的元素通明”时，能够运用的一些Hack。
搜了一下，找到一个不错的完成这种效果的办法–一个关于通明承继度的问题，有爱好的朋友能够看看。原理很简单，增加一个空元素作为通明层，和不想通明可是要完成掩盖效果的元素为同级元素。父级元素运用position:relative定位;两个子元素运用position:absolute定位，完成掩盖。
