一个关于css3背景透明的例子

　　大家都知道使用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以上版本

 

posted @ 2014-12-25 14:58  djdliu  阅读(788)  评论(0)  编辑  收藏  举报