Css Div半透明

用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

转载于:https://www.cnblogs.com/aiqingqing/p/4526327.html

Css Div半透明相关推荐

设置DIV半透明CSS代码：
设置DIV半透明CSS代码: div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;} 说明: 1.filter:对win IE设置半透 ...
css外层DIV半透明内层div不透明-弹出层效果的实现
css外层DIV半透明内层div不透明-弹出层效果的实现 <!DOCTYPE html> <html><head><meta charset="ut ...
问题：给DIV设置半透明层，用CSS实现半透明效果呢？
遇到的问题: 我们在写css样式时,div半透明效果如何实现呢?使用css实现div成半透明效果,css实现层与背景半透明效果. 解决方法: 我们还是直接上代码吧. 一.CSS半透明基础介绍设置DI ...
CSS：CSS+DIV布局网页
现代网页布局:CSS+DIV: 一般的网页都是顺序布局的,很难达到我们需要的网页布局格式,此时使用DIV进行分层布局,类似于盒子,对每一部分内容进行设计.这是现在主流的网页布局方式,使用DIV+CSS ...
html class css,div id class
div id??div class ??div css?????��?????id??class??????CSS??????????????id??class??????css???? ???div ...
CSS + DIV 让页脚始终底部
原文:CSS + DIV 让页脚始终底部一前言经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部, ...
精通CSS+DIV基础总结（三）
Div+CSS可是实现简单的网页设计,对于需要添加动作,更方便的交互,Javascript给我们提供了方便:数据的存储可以利用XML使其更加方便:而对于减少页面与服务器的交互,可以利用Ajax技术,与 ...
CSS+DIV固定底部的漂浮导航条（多浏览器兼容）
2019独角兽企业重金招聘Python工程师标准>>> CSS+DIV固定底部的漂浮导航条(多浏览器兼容) 博客分类: div css 在项目中.为了解决多浏览器兼容的问题..ie6 ...
CSS DIV Shadow
css code: /*2011-11-28 塗聚文締友計算機信息技術有限公司CSS DIV Shadowcss3 */#geovinduDiv-shadow {padding:10px;backg ...

Css Div半透明

Css Div半透明相关推荐

最新文章

热门文章