大家都知道使用opacity调节透明度不仅是背景透明了而且选择区域的文字也跟着透明了，
这是我们不想要的效果，于是强大的css3便有了只让背景透明的功能
那就是background:rgba(0,0,0,0.5);里面参数不用做过多的解释了吧！
前面三个是对背景颜色的控制，全身0表示背景颜色为黑色，
最后一个是对透明度的控制，0.5表示半透明！
应用这个功能做了一个例子供大家参考
全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="js/jquery-1.9.2.min.js"></script>
<style type="text/css">
.child_box{ position:absolute; overflow:hidden; }
h2{ height:43px; line-height:43px;}
.box01{left:0;}
.box02{left:200px;}
.box03{left:700px;}
.box04{left:1100px;}
.text{ position:absolute;text-align:center; background:#000; background:rgba(0,0,0,0.5); color:#fff; left:0;}
.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
.clearfix{zoom:1;}
</style> </head> <body>
<div class="box">
<div class="child_box box01">
<img src="data:images/pic_01.jpg" />
<div class="text">
<h2>风景一</h2>
<span class="tip">风景一描述风景一描述风景一描述风景一描述</span>
</div>
</div>
<div class="child_box box02">
<img src="data:images/pic_02.jpg" />
<div class="text">
<h2>风景二</h2>
<span class="tip">风景二描述风景二描述风景二描述风景二描述风景二描述</span>
</div>
</div>
<div class="child_box box03">
<img src="data:images/pic_03.jpg" />
<div class="text">
<h2>风景三</h2>
<span class="tip">风景三描述风景三描述风景三描述风景三描述风景三描述</span>
</div>
</div>
<div class="child_box box04">
<img src="data:images/pic_04.jpg" />
<div class="text">
<h2>风景四</h2>
<span class="tip">风景四描述风景四描述风景四描述</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".child_box").each(function(index, element) { var imgH=$(this).children("img").height();
var imgW=$(this).children("img").width();
var tipW=$(this).children(".tip").width(imgW);
var textW=$(this).children(".text").width(imgW);
var textH=$(this).children(".text").height();
var boxH=$(this).height(imgH);
var boxW=$(this).width(imgW);
$(this).height(imgH);
$(this).children(".text").css("top",imgH-50+"px"); $(this).hover(function(){
$(this).children('.text').stop(true,true).animate({"top":imgH-textH},300);
},function(){
$(this).children('.text').stop(true,true).animate({"top":imgH-50},300);
})
}); });
</script>
</body>
</html>
ie浏览器兼容到ie8以上版本