CSS系列：[1]CSS实现半透明div层的方法
首先，先看一下实例，如下：
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=gb2312"
/>
<style>
#div1 { margin:0px
auto; width:500px; height:370px ; text-align:center;
background:url(../demoimg/3.jpg);}
#div2 { height:330px;
filter:alpha(Opacity=80);/*支持 IE 浏览器*/
-moz-opacity:0.5;*支持 FireFox 浏览器*/
opacity: 0.5;/*支持 Chrome, Opera, Safari 等浏览器*/
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>
然后，在需要透明层div加CSS代码
div{filter:alpha(opacity=50); /*支持 IE 浏览器*/-moz-opacity:0.50; /*支持
FireFox 浏览器*/opacity:0.50; /*支持 Chrome, Opera, Safari 等浏览器*/}
这样就可以实现CSS半透明
操作方法
- 01
主要应用的代码有： filter:alpha(Opacity=80);/*支持 IE 浏览器*/ -moz-opacity:0.5;*支持 FireFox 浏览器*/ opacity: 0.5;/*支持 Chrome, Opera, Safari 等浏览器*/ z-index:100;/*此处为所在层数，尽可能设置大点*/
- 02
代码如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> #div1 { margin:0px auto; width:500px; height:370px ; text-align:center; background:url(../demoimg/3.jpg);} #div2 { height:330px; filter:alpha(Opacity=80);/*支持 IE 浏览器*/ -moz-opacity:0.5;*支持 FireFox 浏览器*/ opacity: 0.5;/*支持 Chrome, Opera, Safari 等浏览器*/ 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>
- 03
下面我们来见证一下代码实际效果吧！