大家都知道使用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. HBASE学习笔记--概述

    定义: HBase是一个分布式的.面向列的开源数据库,HBase是Google Bigtable的开源实现,它利用Hadoop HDFS作为其文件存储系统,利用Hadoop MapReduce来处理H ...

  2. Quartz 2D官方文档翻译（持续更新中）

    转换  核心绘图模型定义了两个完全独立的坐标空间:用户空间,一个是代表文档页,和设备空间,另外一个代表本机设备的分辨率.用户空间坐标是与设备空间中像素分辨率无关的浮点数字.当你想要打印或者显示你的文档 ...

  3. poj3122--二分加贪心

    大致题意: 就是公平地分披萨pie 我生日,买了n个pie,找来f个朋友,那么总人数共f+1人 每个pie都是高为1的圆柱体,输入这n个pie的每一个尺寸(半径),如果要公平地把pie分给每一个人(就 ...

  4. C语言实现有序二叉树（1）

    在cpp中使用的C语言 头文件 /* 有序二叉树 BsTree */ #ifndef _BT_H #define _BT_H /*节点*/ typedef struct BsTreeNode { in ...

  5. IO库 8.6

    题目:重写7.1.1节的书店程序(P229),从一个文件中读取交易记录.将文件名作为一个参数传递给main. #include <iostream> #include <fstrea ...

  6. std::string转化大小写(C++)

    #include <string> #include <algorithm> void test() { std::string strA="QQQQWWWqqqqq ...

  7. 使用bootstrap做一个响应式的页面

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. nodejs 文件查找中文，替换为英文

    帮以前同事解决一个需求,中文项目 翻译 英文项目~~~ 考虑到具体实现方面的问题,如果智能的话,肯定是要做中文的语法分析,不过感觉这个有难度. 所以最后的方案是遍历文件,将中文短语匹配出来,再进行人工 ...

  9. OpenCV学习 5：关于平滑滤波器 cvSmooth()函数

    原创文章,欢迎转载,转载请注明出处 本节主要了解下cvSmooth函数的一些参数对结果的影响.从opencv tutorial中可以看到这样一段话: 像我这样的数学渣,还是看下图来得形象: 高斯滤波器 ...

  10. SQL Server MySQL 中的 in 与 null

    例子: create table t(x int,y int); insert into t(x,y) values(1,1),(2,2),(null,null); 查询一: select x,y f ...