用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. 002 Spring Restful案例

    1:工程结构 需要注意的是需要额外导入以下三个包: jackson-annotations-2.6.1.jar jackson-core-2.6.1.jar jackson-databind-2.6. ...

  2. android 程序中res/values-v14/styles.xml报错的解决办法

    从旧的ADT迁移的新的ADT时, android 程序中res/values-v14/styles.xml报错: error: Error retrieving parent for item: No ...

  3. go官网教程A Tour of Go

    http://tour.golang.org/#1 中文版:http://go-tour-cn.appsp0t.com/#4 package main import ( "fmt" ...

  4. 等待事件--db file sequential read

    对于最小化db file sequential read 事件所带来的影响,你可以做的另一件事情是减少AVERAGE_WAIT时间. 这是会话必须等待从磁盘提取单块的平均时间,这些信息可以从v$ses ...

  5. delphi对ini文件的操作（转载 万一）

    ini 文件操作记要(1): 使用 TIniFileunit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Gr ...

  6. PCRE

    http://blog.sina.com.cn/s/blog_6a1837e901010ckv.html http://hubeihuyanwei.blog.163.com/blog/static/2 ...

  7. WIndows系统下mysql-noinstall安装配置

    环境: Windowsmysql-noinstall-5.0.37-win32.zip 一.下载MySQL http://www.mysql.com/downloads 二.安装过程 1.解压缩mys ...

  8. JavaScript中判断对象类型的种种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  9. Unity3D基础学习 利用NGUI的Texture播放视频

    利用NGUI播放视频,首先你得导入你的视频 你的电脑中必须安装QuickTime软件,没有,去下一个,如果是Windows系统,安装完之后重启. 接下来转换你的视频格式,如果你的视频在QuickTim ...

  10. 数据迁移sql

    1.把数据库test中的表Table1中的数据插入到数据库test2中的表Table2:insert into test2.Table2(a,c,d) select a,c,5 from test.T ...