CSS实现半透明的方法

IE8不支持以前{filter:alpha(opacity=50);}的私有属性，

转而支持更规范的私有属性-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;

加之Firefox2.0和Opera9.0以前版本很少见到，

所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果，

 1 <div id="out">
 2     <div id="in">不透明<div>
 3     <div id="alpha">半透明<div>
 4 <div>
 5 <style type="text/css">
 6 #out{
 7    padding:20px 0;
 8    height:100px;
 9    width:200px;
10    position:relative;
11 }
12 #in{
13   background:#fff;
14   margin:0 10px;
15 }
16 #alpha{
17      position: absolute;
18      top:0;
19      left: 0;
20      width: 100%;
21      height:100%;
22      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; /*IE8*/
23      filter:alpha(opacity=30);  /*IE5、IE5.5、IE6、IE7*/
24      opacity: .3;  /*Opera9.0+、Firefox1.5+、Safari、Chrome*/
25      z-index: -1;  /*让其位于in的下面*/
26      background:#fff;
27 }
28 </style>