大家都知道使用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. OC中两个关键字的作用：@property和@synthesize

    两个关键字的使用:@property和@synthesize 一.@property关键字这个关键字是OC中能够快速的定义一个属性的方式,而且他可以设置一些值,就可以达到一定的效果,比如引用计数的问题 ...

  2. tmux 命令

    创建并指定session名字tmux new -s $session_name 删除sessionCtrl+b :kill-session 临时退出sessionCtrl+b d 列出sessiont ...

  3. 跨域文件crossdomain.xml在weblogic上的部署

    1.新建一个ROOT文件夹,把crossdomain.xml拷贝到这个文件夹下. 2.在ROOT文件夹下新建一个WEB-INF文件夹 3.在WEB-INF文件夹下建立一个weblogic.xml文件, ...

  4. 关于jQuery中的$.grep()方法的使用

    数组筛选的方法,记录下,以加深印象. var ary = [1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1]; ary = $.grep(ary, functi ...

  5. php不同形式的实现a-z的26个字母的输出

    直接上代码: for($i=ord('a'), $n=ord('z'); $i<=$n; $i++){ echo chr($i),PHP_EOL; } echo PHP_EOL; $char = ...

  6. 非常值得学习的java 绘图板源代码

    package minidrawpad; import java.awt.BasicStroke; import java.awt.Color; import java.awt.Font; impor ...

  7. ueditor插件 -- 插入填空题

    插入填空题,一个看似小小的需求,但是却是折腾了很9.主要产品那边的要求,空格上面要标有序号,并且再页面当中能够同步空格答案列表. 1.ueditor插件 插件入门,官方的例子还是很简单直接的,对于我们 ...

  8. Python 字符串格式化示例

    先看代码吧. #!/usr/bin/env python #-*- coding: utf-8 -*- __author__ = 'jiang' __creattime__ = '2015/10/31 ...

  9. MarkWord

    MarkWord - 可发布博客的 Markdown编辑器 代码开源 1 /// <summary> 2 /// 同步呈现 3 /// </summary> 4 /// < ...

  10. Linux 二进制包安装MySQL的一些问题

    第一步:安装相关的依赖yum install perl-Data-Dumper 第二步:初始化mysql数据库的内部信息./scripts/mysql_install_db --basedir=/us ...