IE8下實現兼容rgba

昨天遇到一個問題，要實現一個背景透明的效果，用CSS3用rgba()就能實現，即

background: rgba(0,0,0,.5);

可是要兼容到IE8，就發現沒有透明效果，由於IE8不支持rgba()函數。下面咱們總結一下rgba()函數的含義。

rgba的含義，r表明red，g表明green，b表明blue，a表明透明度。紅綠藍是三原色，全部顏色均可以由這三種顏色拼合而成。好比rgba(0,0,0,.5)就是透明度爲0.5的黑色。現代瀏覽器是支持rgba的，可是在IE8等古董級瀏覽器中是不支持rgba的，IE8只能勉強支持rgb()函數（即去掉了透明度，只能表示顏色）。

不過網上有這樣的解法

background: rgb(0, 0, 0);    /*不支持rgba的瀏覽器*/
background: rgba(0,0,0,.5);  /*支持rgba的瀏覽器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);    /*IE8支持*/

第二句話的意思就是當上一行的透明度不起做用的時候執行。這句話的意思原本是用來作漸變的，可是這個地方不須要漸變。因此兩個顏色都設置成了相同的顏色。

解釋下#7f000000，第一部分是#號後面的7f。是rgba透明度0.5的IEfilter值。從0.1到0.9每一個數字對應一個IEfilter值。對應關係以下：

第二部分是19後面的六位。這個是六進制的顏色值。要跟rgb函數中的取值相同。好比rgb(0,0,0,)對應#000；都是黑色。

到這裏，rgba的用法就能夠兼容IE8了。

最近看到，不直接在樣式裏面添加filter，而是利用<!--[if IE]><![endif]-->來爲ie添加filter兼容。在事後又發現IE9同時支持RGBA和filter，致使兩個重疊，透明效果變差，因此須要改成<!--[if lt IE 9]><![endif]-->,
具體作法以下：

// 此方法感受略顯麻煩，須要維護兩個地方的代碼。改成下方作法
<!--[if lt IE 9]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
       zoom: 1;
    }

    </style>

<![endif]-->

IE9同時支持RGBA和filter，會致使兩個重疊，透明效果異常。有網友評論，建議用 :root 來去除 ie9+ 瀏覽器的 filter，也是很不錯的辦法，在此改成如下作法

.color-block {
        background: rgb(0, 0, 0);    /*不支持rgba的瀏覽器*/
        background: rgba(0,0,0,.5);  /*支持rgba的瀏覽器*/
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); 
    }
    
    :root .color-block {
        filter: none;
    }