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;
    }