用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. 1001WA

    时间关系只实现了其中一部分的功能  现在的程序可以实现一个大数的平方 #include <stdio.h> #include <string.h> void mypower(i ...

  2. spring xml配置标签详解

    <!-- 指定类的名称 在对bean进行定义时,除了使用id属性来指定名称之外,为了提供多个名称,可以使用alias标签来指定. --> <alias name="&quo ...

  3. 绑定dropdownlist

    System.Data.SqlClient.SqlConnection sqlconn = new System.Data.SqlClient.SqlConnection(); sqlconn.C; ...

  4. ClipDrawable 资源

    ClipDrawable 代表从其他位图上截取的一个“图片片段”. 示例: main.xml <?xml version="1.0" encoding="utf-8 ...

  5. 替代 yunio , 推荐一个国外的云存储（同步盘） wuala（这个网站也挂了）——功能评测非常全面

    替代 yunio , 推荐一个国外的云存储(同步盘) wuala 话说自从云诺开始收费后,我的文件便再没同步或备份过,前天没事便找了一下,发现一个国外的网盘,注册送 5 G 空间(对我来说同步日常文件 ...

  6. 【HDOJ】1474 Always On the Run

    普通DP.基本和floyd一个思路. /* 1474 */ #include <cstdio> #include <cstring> #include <cstdlib& ...

  7. LeetCode——Permutations

    Permutations Given a collection of numbers, return all possible permutations. For example,[1,2,3] ha ...

  8. python_Opencv_绘图

    opencv中也可以用一些函数来绘图 直接上源码,例子: # -*- coding: utf-8 -*- import numpy as np import cv2 # 黑色的图片 img=np.ze ...

  9. 从无到有开发连麦直播技术<转>

    转贴地址:http://blog.csdn.net/heisedelangzi/article/details/52400333 从无到有开发连麦直播技术点整理-AnyRTC 直播关键字 采集.前处理 ...

  10. SKAction类

    继承自 NSObject 符合 NSCodingNSCopyingNSObject(NSObject) 框架  /System/Library/Frameworks/SpriteKit.framewo ...