> 文章列表 > CSS系列:[1]CSS实现半透明div层的方法

CSS系列:[1]CSS实现半透明div层的方法

首先,先看一下实例,如下:
<html
xmlns=\"http://www.w3.org/1999/xhtml\">

<meta
http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\"
/>

#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;  }

<div
id=\"div1\">

<div
id=\"div2\">
这里是透明的DIV

然后,在需要透明层div加CSS代码
div{filter:alpha(opacity=50);  /*支持 IE 浏览器*/-moz-opacity:0.50; /*支持
FireFox 浏览器*/opacity:0.50;  /*支持 Chrome, Opera, Safari 等浏览器*/}
这样就可以实现CSS半透明

廊坊新闻资讯