Html/Css標簽透明度效果的實現,在html中，實現半透明背景，在HTML Div+Css編程中，為了實現版透明，通常有3中做法。
第一種是HTML5的透明，在H5中支持透明背景顏色，但遺憾的是，H5中的辦透明背景顏色只支持 rgba的寫法，不支持16進制的寫法
如：background-color:rgba(0,152,50,0.7);// –>70%的不透明度
background-color:transparent;支持完全透明
在傳統瀏覽器中，IE瀏覽器的獨特性也是某些透明度設置的不確定性因素
一般來說,firefox和webkit,khtml陣營中實現透明的方式非常簡單，也包括IE9+及大於IE9的瀏覽器使用上述HTML5設置透明。
第二種是使用半透明粒子圖片，圖案或者漸變半透明PNG圖片，這種方法是兼容性兼容性的，除了IE6需要使用插件來修改PNG不透明的bug外，
支持性非常好,設置可以重復，還可以定位，在H5中也可以設置大小，不過在網頁中追求極致的話加載圖片越少越好。
(粒子：透明度勻稱的圖片裁剪至5px * 5px以下，這樣加載速度要快的多)background:url(path/my_png_bg.png) no-repeat center center scroll;
第三種方式是使用透明度+背景顏色或者背景圖片來實現。background-color:rgb(0,152,50);
opacity:0.7;background:url(path/my_bg.jpg) no-repeat center center scroll;
opacity:0.7;
那么，問題來了，IE6-IE8完全不支持 opacity,所以還得考慮一下 IE的濾鏡
IE中有很多濾鏡，其中使用alpha通道來設置不透明度filter:(opactity=70)
因此上述方案改造如下background-color:rgb(0,152,50);
opacity:0.7;
filter:alpha(opacity=70);background:url(path/my_bg.jpg) no-repeat center center scroll;
opacity:0.7;
filter:alpha(opacity=70);
注意：opacity或者alpha的值強調的是“不”透明度
推薦使用第三種方案
Opacity
padding:0px;
margin:0px;
}
.mainbox{
width:200px;
height:200px;
clear:both;
overflow:hidden;
margin:100px auto 0px auto;
background-color:#f06;
}
.sub-mainbox
{
width:250px;
height:200px;
margin:-50px auto 0px auto;
border:1px solid white;
border-radius:5px;
/**background-color:rgb(0,152,50);**/
background:url(path/my_bg.jpg) no-repeat center center scroll;
opacity:0.7;
filter:alpha(opacity=70);
}