透明-----css的filter，opacity與css3的background-color: rgba
先從問題出發：
現象：
今天在專案中發現一個在IE9下的bug，現象是IE9下背景為不透明，而在IE8，IE10以及firefox，chrome下都是正常的，如下圖：
IE9的效果，背景為純白色，
IE8，IE10，firefox，chrome的透明效果
調查過程：
1.檢視程式碼：
css中對li標籤設定的是
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#BF494949,endColorstr=#BF494949);background-color:rgba(0, 0, 0, 0.3)
2.補習一下程式碼中相關知識
(只有真正瞭解了原始碼，才能在針對原始碼做自如的修改)
filter:progid:DXImageTransform.Microsoft.gradient(enabled=bEnabled,startColorStr= ,endColorStr= )
屬性：
enabled:可選項。布林值(Boolean)。設定或檢索濾鏡是否啟用。 true | false
true: 預設值。濾鏡啟用。
false:濾鏡被禁止。
startColorStr:可選項。字串(String)。設定或檢索色彩漸變的開始顏色和透明度。
- 格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進位制正整數。
- 取值範圍為 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值範圍的值將被恢復為預設值。 取值範圍為 #FF000000 - #FFFFFFFF 。預設值為 #FF0000FF 。不透明藍色。
EndColorStr:可選項。字串(String)。設定或檢索色彩漸變的結束顏色和透明度。參閱 startColorStr 屬性。預設值為 #FF000000 。不透明黑色。
目前IE6-IE9都支援，包括IE9
background-color:rgba(0, 0, 0, 0.3)
這是css3的一個樣式，
語法:
R：紅色值。正整數 | 百分數
G：綠色值。正整數 | 百分數
B：藍色值。正整數| 百分數
A：透明度。取值0~1之間
目前IE9以及IE9以上，firefox，chrome都支援。
3.問題找到了
由上面兩個知識中發現，IE9是同時支援的，這就是說為什麼IE8和IE10都正常，然後開啟F12檢視
而IE8和IE10分別支援其中一個。
接著在F12中將filter的樣式去掉，發現效果是OK的；將filter勾選，然後將background-color去掉，發現透明效果不是很好，可見IE9對其支援度還不夠。
接下來就是如何修改了。
- 在html中常用的是條件註釋，如：
<!--[if IE 9.0]>
- 在js中又採用版本判斷
if(navigator.appName=="Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g,"") == "MSIE9.0")
- 但現在是在css檔案中去判斷，思前想後用hack判斷吧，因為IE9支援@media all所以採用以下的方式
@media all and (min-width:0) {
li{filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',startColorstr=#BF494949,endColorstr}
將enabled改為false即可，這樣在IE9就可以，而IE9以上及firefox，chrome因為不識別filter:progid，所以不做處理，從而達到相容性。
4.額外透明的方法
- opacity：取值範圍是0-1,1代表不透明，如opacity(1);
問題：會造成不單該元素自身背景透明瞭,它的子元素會繼承opacity屬性，也會透明.
- png-8的透明圖片
問題：採用透明圖片可以實現，但IE6下會有問題，同時圖片相對js程式碼以及css來說，所需要的網路請求大，會影響頁面的速度