IE8下實現相容rgba

2021-07-06 05:11:07 字數 1034 閱讀 8702

昨天遇到乙個問題,要實現乙個背景透明的效果,用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,而是利用來為ie新增filter相容。在過後又發現ie9同時支援rgba和filter,導致兩個重疊,透明效果變差,所以需要改為,

具體做法如下:

全選複製

放進筆記

IE8下實現相容rgba

background rgba 0,0,0,5 但是要相容到ie8,就發現沒有透明效果,因為ie8不支援rgba 函式。下面我們總結一下rgba 函式的含義。rgba的含義,r代表red,g代表green,b代表blue,a代表透明度。紅綠藍是三原色,所有顏色都可以由這三種顏色拼合而成。比如rgba...

IE8下實現相容rgba

昨天遇到乙個問題,要實現乙個背景透明的效果,用css3用rgba 就能實現,即 background rgba 0,0,0,5 但是要相容到ie8,就發現沒有透明效果,因為ie8不支援rgba 函式。下面我們總結一下rgba 函式的含義。rgba的含義,r代表red,g代表green,b代表blue...

使用rgba屬性相容IE8

css3 rgba 即在原本3原色的基礎上增加了alpha 透明度 通道,該屬性的相容性如下 型別internet explorer firefox chrome opera safari 版本 ie6 firefox 3.0.10 chrome 2.0.x opera 9.64 safari 4 ...