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>