大家都知道使用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结构体中位域

    C结构体中位域的一点小知识,最近在看资料时遇到结构体中的一种特殊操作——位域,在下面的程序中我将根据自己的理解进行简单介绍.程序只是为了了解位域的一些性质,运行时有些编译器可能会报错. 程序代码如下( ...

  2. tomcat学习（-）windows 7 x64 配置tomcat服务

    下载Tomcat 下载地址:http://tomcat.apache.org/ 安装版本:Tomcat 9.0 安装环境:windows 7 x64 阅读Tomcat文档 文档路径:http://lo ...

  3. sqlserver查询某一字段重复超5次的所有记录

    用的sqlserver2008 r2. SELECT  * FROM t_class WHERE id IN (SELECT  id FROM (SELECT  ROW_NUMBER() OVER ( ...

  4. OCP准备记录

    0628: 051 OK053 1-192! 加油了,每天至少100道吧明天复习一下626,627,628这几天的成果先看一遍对的,再看一遍错的!!最少要把051复习一遍 0629: 今天忙了太久 只 ...

  5. 接收Dialog的值

    System.Windows.Forms.DialogResult result = MessageBoxEx.Show("保存成功", Language.String.Hint, ...

  6. -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory

    刚刚学习SHELL 写了一个简单的例子发生如下错误 -bash: ./test.sh: /bin/bash^M: bad interpreter: No such file or directory ...

  7. 关于EJB 时间注解与oracle数据库时间格式

    EJB中Temporal是时间注解,其中TemporalType是时间注解的枚举类型其中包括 TemporalType类型,请看源码/*** Type used to indicate a speci ...

  8. 在MFC主对话框OnInitDialog()中弹出对话框

    BOOL CXXXDlg::OnInitDialog(){ CDialogEx::OnInitDialog(); SetIcon(m_hIcon, TRUE); SetIcon(m_hIcon, FA ...

  9. VS的Release模式配置技巧

    环境:如果要将bin\release目录作为我们产品的发布目录或者产品来源目录,那么release目录中就只能有产品需要用到的东西,但是以VS默认的配置编译的话会生成比较讨厌的.pdb,.vshost ...

  10. jQuery和DOM对象之间的转换

    jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是 ...