一個小方法解決RGBA不兼容IE8

本文轉載於:猿2048網站一個小方法解決RGBA不兼容IE8

原網頁http://blog.csdn.net/leihope_/article/details/70158902

要在一個頁面中設置一個半透明的白色div。這個貌似不是難題，只須要給這個div設置以下的屬性便可：

background: rgba(255,255,255,0.1);

可是要兼容到ie8。這個就有點蛋疼了。由於ie8不支持rgba()函數。下面咱們總結一下rgba()函數的含義。

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

因此在ie8中設置半透明就要費點腦子了。從大神那裏得知可使用ie的filter來解決這個問題，css代碼以下：

background: rgba(255,255,255,0.1);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);

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

你們注意，這個顏色「#19ffffff」是由兩部分組成的。

第一部是#號後面的19 。是rgba透明度0.1的IEfilter值。從0.1到0.9每一個數字對應一個IEfilter值。對應關係以下：

 

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

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