大家都知道使用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. 切换tab，并且动态添加标签

    <script type="text/javascript"> /*处理ie7.ie8不兼容getElementsByClassName*/ if(!document. ...

  2. 自定义Toast样式-两行文本居中显示

    toast可以设置自定义的view和显示位置.下面是一个简单的例子,复杂些的就是改变其布局文件就可以了. /** * @author BMR * @ClassName: ToastWithTwoTex ...

  3. 浅谈print2flash的在线预览转换应用（原创）

    print2flash是一种在线预览转换工具,可以将doc.docx.xls.pdf.ppt等格式的文档转换成flash文件进行预览,因为之前使用的flash2paper只支持32为操作系统,不支持6 ...

  4. perl 打开和关闭文件

    #!/usr/bin/perl -w use strict; #print "please input a string\n"; #my $line = <STDIN> ...

  5. leetcode First Missing Positive python

    class Solution(object): def firstMissingPositive(self, nums): """ :type nums: List[in ...

  6. leetcode Remove Duplicates from Sorted Array python

    class Solution(object): def removeDuplicates(self,nums): if len(nums) <= 0: return 0 j=0 for i in ...

  7. window.showModalDialog的基本用法

    window.showModalDialog的基本用法 showModalDialog() (IE 4+ 支持) showModelessDialog() (IE 5+ 支持) window.show ...

  8. linux shell 札记

    shell 数组 数组索引: 单个元素索引: ${array[n]} 全部元素:   ${array[*]}  或者  ${array[@]} 部分索引: ${array[2:]} 数组所有元素统一加 ...

  9. ASP.NET Identity 系列笔记目录

    编写目的 混迹博客园已经有一段时间了,一直都是在学习各路大神的文章,自己却没有做出什么贡献,所以觉得应该写一点点内容和大家一起分享.但是本人实在才疏学浅,有心无力啊!正好最近在学习 Microsoft ...

  10. Cortex-M3学习日志（五） -- DAC实验

    终于逮了个忙里偷闲的机会,就再学一下LPC1768的外围功能吧,循序渐进是学习的基本规则,也许LPC1768的DAC与8位单片机16位单片机里面集成的DAC操作类似,但是既然这是懒猫的学习日志,就顺便 ...