css中使用rgba()遇到的問題及解決方法

今天遇到了一個問題，要在一個頁面中設定一個半透明的白色div。這個似乎不是難題，只需要給這個div設定如下的屬性：

background: rgba(255,255,255,.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,.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了。

#

以上是css中使用rgba()遇到的問題及解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！