使用rgba屬性相容IE8

2021-06-22 23:13:17 字數 2026 閱讀 7137

① css3 rgba 即在原本3原色的基礎上增加了alpha(透明度)通道,該屬性的相容性如下:

型別internet explorer

firefox

chrome

opera

safari

版本(×)ie6

(√)firefox 3.0.10

(√)chrome 2.0.x

(√)opera 9.64

(√)safari 4

(×)ie7

(×)ie8

(√)ie9

ie家族只有9以後的版本支援該屬性;

有童鞋可能對rgba的使用環境不大清楚,但肯定熟悉opacity屬性。opacity實現了元素的alpha通道,如opacity:0.5表示50%的透明度,但opacity不止實現了元素的透明度,同時包括元素的子元素也有該透明度,比如

style

="background:#000;opacity:0.5">我是內部文字

div>

將使整個節點樹顯示為50%的透明灰度;而rgba可以直接表示顏色屬性和透明度,比如

style

="background:rgba(0,0,0,0.5);">我是內部文字

div>

前三個引數是顏色的rgb表示法,如0,0,0就表示黑色,最後乙個引數是alpha值,和opacity具有相同的意思,但這次的設定是使的背景色變為50%的透明灰度,內部節點和內容依然是不透明的。

對於支援該屬性的瀏覽器可以直接使用:

.class

針對ie6-8的hack為:

.class

用到了ie自家的filter濾鏡。ie雖然不支援很多標準,但自己也提供了很多有意思的功能,比如filter濾鏡、expression行內表示式等。相關的引數我不再解釋,自己查查。提示兩點:

1.startcolorstr和endcolorstr的值由兩部分組成:前兩位是alpha值,後六位是顏色值,都是十六進製制表示法;可以用x=a*255(其中x是表示式的16進製制值,a表示alpha值如0.5);

2.因為ie5+都是支援filter的,所以可以這樣寫:

如果寫在css裡,因為ie9+既支援filter,又支援rgba,所以會看到兩者疊加的效果。

rgba是一種在css中宣告包含透明效果的顏色的方法,通過rgba我們可以將乙個元素設定為透明,而不會影響其子元素。但是並非所有的瀏覽器支援rgba的背景色,其中使用者頗多的老版本ie瀏覽器就不支援,好在ie瀏覽器支援條件注釋,我們可以拋棄rgb並使用ie瀏覽器的乙個私有css濾鏡來實現同樣的效果。上**:

background:transparent;

filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#4b7d0000,endcolorstr=#4b7d0000);

zoom: 1;}

dximagetransform.microsoft.gradient濾鏡裡的startcolorstr引數值是#aarrggbb形式的,其中的aa是代表不透明度的十六進製制,00表示完全透明,ff就是全不透明,化成十進位制的範圍就是0~255,剩下的rrggbb就是顏色的十六進製制**。例子中background: rgba(125, 0, 0, .3);表示的是30%不透明度的紅色背景。如何把30%的不透明度轉換成十六制呢?很簡單,先計算#aa的的十進位制x,x/255 = 3/10,解得x=3*255/10,然後再把x換算成十六進製制,約等於4b。

rgba顏色還可以用於border,不過,不同的瀏覽器對於border的rgba支援不太一樣,不過唯一的不同是,firefox在border的拐角處會出現疊加,比如透明度是0.4,那麼在firefox中,四個角的透明度會變成0.8,而支援rgba的非ff瀏覽器不會出現這種情況。

IE8下實現相容rgba

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

IE8下實現相容rgba

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

相容ie8的rgba 寫法

在頁面中設定乙個半透明的div一般情況下使用rgba 函式,但在ie8情況下無法使用rgba 函式。rgba的含義,r代表red,g代表green,b代表blue,紅綠藍是三原色。所有顏色都可以由這三種顏色拼合而成。a代表透明度。比如rgba 255,255,255,0.1 就是透明度為0.1的白色...