用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. django + nginx + raspberypi + pidaro

        对于一个从事后台开发的人来说,搞了个网站,我自己都觉得有点意外.不是很懂html,不是很懂css,不是很懂js,不是很懂web开发模式/框架,不是很懂httpd/nginx--,web的东西样 ...

  2. SQLSERVER收缩数据库日志

    数据库名为:EKECMS DUMP TRANSACTION EKECMS WITH NO_LOG;BACKUP LOG EKECMS WITH NO_LOG;DBCC SHRINKDATABASE(E ...

  3. 浅谈多核CPU、多线程、多进程

    1.CPU发展趋势 核心数目依旧会越来越多,依据摩尔定律,由于单个核心性能提升有着严重的瓶颈问题,普通的桌面PC有望在2017年末2018年初达到24核心(或者16核32线程),我们如何来面对这突如其 ...

  4. 001Spark文件分析测试

    使用spark-1.4.1-bin-hadoop2.6进行处理,测试文件大小为3G, 测试结果: 1:统计一个文件中某个字符的个数 scala> sc.textFile("/home/ ...

  5. angular2 学习笔记 ( Http 请求)

    refer : https://angular.cn/docs/ts/latest/guide/server-communication.html https://xgrommx.github.io/ ...

  6. EMV规范 ---ISO7816 T=0协议的时间特性

    复位应答期间: 字符间的时间间隔最小是12etu,最大是9600etu,但整个ATR不得超过19200etu(TS的起始沿到最后一个字符的起始沿 从卡片发出的连续字符其最小时间间隔为12etu,但是终 ...

  7. 转:implementing cons/car/cdr without explicit storage

    I know this is old wine but it’s just too cool! It elegantly demonstrates closure and higher-order f ...

  8. Actor模型

    Actors模型(Actor model)首先是由Carl Hewitt在1973定义, 由Erlang OTP (Open Telecom Platform) 推广,其 消息传递更加符合面向对象的原 ...

  9. 【jQuery】jQuery API 过 一 遍

    closest, parents <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  10. HDOJ(HDU) 2091 空心三角形

    Problem Description 把一个字符三角形掏空,就能节省材料成本,减轻重量,但关键是为了追求另一种视觉效果.在设计的过程中,需要给出各种花纹的材料和大小尺寸的三角形样板,通过电脑临时做出 ...