用CSS控制外层DIV不透明，而内层DIV透明，这样实现的效果是意想不到的，还不错吧，其实代码也是很简单的，也很好理解，主要是用了CSS的滤镜。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>半透明div</title>
<style>
#div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(/jscss/demoimg/wall3.jpg);}
#div2 { height:330px; filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;z-index:100; background-color:#ffffff; }
</style>
</head>
<body>
<div id="div1">
<div style="padding:20px;"><div id="div2">这里是透明的DIV</div></div>
</div>
</body>
</html>

参考：http://www.codefans.net/jscss/code/1061.shtml

Css Div半透明的更多相关文章

  1. 使用css让div半透明

    设置div的背景为半透明,下面有个不错示例,使用div+css来实现下,不会的朋友可以参考下 div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity ...

  2. css div要点汇总

    1.子元素选择两种 h1 strong{color:red}意思是所有后代只要是strong就变成红色 h1>strong{color:red}效果同上但只对第一代后代元素有效 相邻兄弟元素 h ...

  3. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  4. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  5. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  6. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  7. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  8. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  9. CSS+DIV常用命名

    常用的符合CSS+DIV规则的命名 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单: ...

随机推荐

  1. getsockname和getpeername函数

    这2个函数或者返回与某个套接字关联的本地协议地址(getsockname),或者返回与某个套接字关联的外地协议地址(getpeername) int getsockname(int sockfd, s ...

  2. Java中new关键字和newInstance方法的区别

    在初始化一个类,生成一个实例的时候,newInstance()方法和new关键字除了一个是方法一个是关键字外,最主要的区别是创建对象的方式不同.newInstance()使用类加载机制,new是创建一 ...

  3. 如何让Qt 的程序等待一段时间（等待的同时，还让主界面刷新图片）good

    后面这种方法可以不影响其他线程的响应,又可以达到等待的目的. 测试的一个小例子: class Widget : public QWidget { Q_OBJECT public: Widget(QWi ...

  4. 转:PHP教程之PHP调用session_start后页面始终加载的问题研究

    今天群里有朋友说他的遇到一个有趣的问题: 一个PHP页面的执行时间比较长(15秒左右),而只要这个页面没有执行完毕,其他的页面访问都是长时间加载状态,只有那个页面执行完毕了,剩下的页面才能打开. 这是 ...

  5. "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Connection

    "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Conne ...

  6. Currency Exchange(判断是否有正环)

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16456   Accepted: 5732 Description Seve ...

  7. Codeforces Round #312 (Div. 2) B.Amr and The Large Array

    Amr has got a large array of size n. Amr doesn't like large arrays so he intends to make it smaller. ...

  8. treap启发式合并

    注意输入v要在建根的前面. #include <cstdio> #include <iostream> #include <algorithm> #include ...

  9. 【模拟】XMU 1599 斐波那契汤

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1599 题目大意: 给k,m,q以及f[1]...f[k],当n<m时,f[n]= ...

  10. delphi 托盘程序 转

    Delphi的托盘编程   .现在很多程序都用这个,比如傲游,迅雷等,主要代码如下: uses Windows, Messages, SysUtils, Variants, Classes, Grap ...