用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. python numpy 使用笔记 矩阵操作

    (原创文章转载请标注来源) 在学习机器学习的过程中经常会用到矩阵,那么使用numpy扩展包将是不二的选择 建议在平Python中用多维数组(array)代替矩阵(matrix) 入门请考 http:/ ...

  2. codeforces567E. President and Roads

    题目大意:总统要回家,会经过一些街道,每条街道都是单向的并且拥有权值.现在,为了让总统更好的回家,要对每一条街道进行操作:1)如果该街道一定在最短路上,则输出“YES”.2)如果该街道修理过后,该边所 ...

  3. HTML中插入视频

    最常用的向HTML中插入视频的方法有两种,一种是古老的<object></object>标签,一种是html5中的<video></video>标签. ...

  4. laravel框架——composer导入laravel

    第一种: composer create-project --prefer-dist laravel/laravel 名称 "5.2.*"第二种: composer global ...

  5. Hibernate的查询语言之HQL(一)——快速入门

    Hibernate提供异常强大的查询体系,使用Hibernat有多种查询方式可以选择:即可以使用Hibernate的HQL查询,也可以使用条件查询,甚至可以使用原生的SQL查询语句.不仅如此, Hib ...

  6. 令用EclipseJ2EE创建的Dynamic Web project目录结构与用MyEclipse创建的Web project一样

    Eclipse for EE 版本, 创建 Dynamic Web Project  会有俩个工程. 其中一个 是你创建的工程, 另外一个 是Servers 工程(其实也就是tomcat 的一个配置) ...

  7. 如何在github上创建一个Repository (Windows)

    一种方式是利用Github for windows工具 来操作github,这个是我推荐的方式 1 请先下载一个工具Github for windows,下载地址为:https://windows.g ...

  8. HDU 3446 daizhenyang's chess

    http://acm.hdu.edu.cn/showproblem.php?pid=3446 题意:一个棋盘,有个KING,有一些能走的点,每次只能走到没走过的地方,没路可走的输,求先手是否必胜. 思 ...

  9. handler.post(r)同一个线程的疑惑

    handler.post(r);是把r加到消息队列,但并未开辟新线程.等到消息被取出时才执行. package com.lei.handlethread; import android.os.Bund ...

  10. 【HDOJ】1310 Team Rankings

    STL的应用,基本就是模拟题. /* 1410 */ #include <iostream> #include <string> #include <algorithm& ...