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

一个关于css3背景透明的例子的更多相关文章

  1. css3背景透明文字不透明

    在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明,而文字保持不透明.而IE6/7/8浏览器不支持rgba,只有使用IE的专属滤镜fi ...

  2. 【原】CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  3. CSS实现背景透明，文字不透明，兼容所有浏览器

    11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...

  4. CSS实现背景透明，文字不透明(兼容所有浏览器)

    我们平时所说的调整透明度,其实在样式中是调整不透明度,如下图所示例: 打开ps,在图层面板上,可以看到设置图层整理不透明度的菜单,从 0% (完全透明)到 100%(完全不透明). 实现透明的css方 ...

  5. CSS3实现背景透明文字不透明

    最近遇到一个需求,如下图,input框要有透明效果 首先想到的方法是CSS3的 opacity属性,但事实证明我想的太简单了 这个属性虽然让input框有透明效果,同时文字和字体图标也会有透明效果,导 ...

  6. CSS3实现背景透明，文字不透明

    最近遇到一个需求,要在图片上显示带有半透明背景的文字,效果如下图所示: 看到这个需求之后,第一反应是使用CSS3中的opacity设置元素的透明度. <!DOCTYPE html> < ...

  7. 创建一个背景透明的UIViewController

    有时候想让UIViewController背景透明,让我们可以看到下层的UI,直接设置它的背景颜色为clearColor(),还是有黑色的默认背景在那里.下面是解决该问题的例子: 在storyboar ...

  8. css3自定义滚动条背景透明

    .editor{ overflow:hidden; height:640px; padding:0 45px; border: 0 none; outline: none; } .editor::-w ...

  9. CSS3 实现背景透明，文字不透明，兼容所有浏览器

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>opac ...

随机推荐

  1. C# winfrom中Flash播放使用axShockwaveFlash控件设置透明XP出现白色背景解决办法，仿QQ魔法表情效果

    //播放时  图片周围有锯齿白边出现    反锯齿处理暂无解决办法. 如有大神 请给我留言 新Form    AllowDrop True 引用using System.IO; 拖1个Button p ...

  2. Android源码大全

    JavaApk-安卓应用游戏APP源码下载 - Android App Games Source Download. http://www.javaapk.com/  700多个 Android 例子 ...

  3. Guestinfo.hbm(1)The markup declarations contained or pointed to by the document type declaration must be well-formed

    今天启动ssh项目是居然报错了,还提示要联网启动,看了看错误信息发现,肯定是Hibernate映射文件的声明头出错了,仔细一下: hbm.xml中的dtd头直接是连接www.hibernate.org ...

  4. U盘安装win7+CentOS7双系统

    决定要好好学习一下Linux了,不管是为了以后技术发展的需要抑或是满足自己的兴趣,都是时候来涉足一下了.我准备在我的ThinkPad X200i(一个老掉牙的老TP本子)上装一个Linux发行版,这里 ...

  5. Java程序执行Linux命令

    Java程序中要执行linux命令主要依赖2个类:Process和Runtime 首先看一下Process类: ProcessBuilder.start() 和 Runtime.exec 方法创建一个 ...

  6. Android 利用剪切板(clipboardManager )实现数据传递

    首先是系统剪切板的调用服务: ClipboardManager ClipboardManager=getSystemService(Context.CLIPBOARD_SERVICE); 然后是写入, ...

  7. Python进阶之map()、reduce()、filter()

    map()函数 .note-content {font-family: "Helvetica Neue",Arial,"Hiragino Sans GB",&q ...

  8. css3——webkit-animation动画

    -webkit-animation:仍旧是一个复合属性,   -webkit-animation: name duration timing-function delay iteration_coun ...

  9. 我用的php开发环境是appserv一键安装，通过http://localhost测试成功，但是我有点不清楚的就是为什么访问.php文件要在地址栏上加上localhost（即http://localhost/text.php）才能成功访问?

    这类似于一个域名地址. 因为默认localhost 就是指向本机.所以就用这个来访问自己本地的网页.比如你也可以输入 http://127.0.0.1/text.php http://192.168. ...

  10. Internet设置->连接选项卡->局域网(LAN)设置 某些设置由系统管理员进行管理

    今天突然发现ss不能使用了.经过一系列排查发现 Internet设置->连接选项卡->局域网(LAN)设置 某些设置由系统管理员进行管理,如上图. 修改注册表值HKEY_LOCAL_MAC ...