大家都知道使用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="images/pic_01.jpg" /> <div class="text"> <h2>风景一</h2> <span class="tip">风景一描述风景一描述风景一描述风景一描述</span> </div> </div> <div class="child_box box02"> <img src="images/pic_02.jpg" /> <div class="text"> <h2>风景二</h2> <span class="tip">风景二描述风景二描述风景二描述风景二描述风景二描述</span> </div> </div> <div class="child_box box03"> <img src="images/pic_03.jpg" /> <div class="text"> <h2>风景三</h2> <span class="tip">风景三描述风景三描述风景三描述风景三描述风景三描述</span> </div> </div> <div class="child_box box04"> <img src="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以上版本