① 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的白色...