css3案例之---采用rgba实现背景透明内容不透明

 

   前言：

 

     部分内容来自doy的博客：《CSS3 RGBA不是简单的RGB与opacity相加》，感谢作者！

 

     个人做积累学习用

 

   正文：

 

     前面我也有一篇简单整理过rgba，如果不熟悉的可以看看那个。

 

     我们来看下面这个例子：

 

<div id="up-wrap">
	我是上面这层的文字
</div>
	
	
<div id="down-wrap">
	我是下面这层的文字
</div>

 

 #up-wrap,#down-wrap{
		width:380px;
		height:80px;
		padding:20px;
		position:relative;
		color:#fff;
		z-index:3;
}
	
#up-wrap{
		background:blue;
		opacity:.7;
		filter:alpha(opacity=70);
}
	
#down-wrap{
		z-index:1;
		margin-left:10px;
		margin-top:-110px;
		background:red;
}

 

    我们采用opacity来进行透明处理，但是效果：

 

     
 
    
      当然，这个不是我们需要的，我们设置了上面的字体颜色为#fff，我们可以用rgba来实现改进！

 

#up-wrap{
	background:rgba(0,0,255,0.7);
}

 

    效果图：