?
本文檔使用 php中文網(wǎng)手冊(cè) 發(fā)布
RGBA(R,G,B,A)
R:紅色值。正整數(shù) | 百分?jǐn)?shù)
G:綠色值。正整數(shù) | 百分?jǐn)?shù)
B:藍(lán)色值。正整數(shù) | 百分?jǐn)?shù)
A:Alpha透明度。取值0 - 1之間。
IE6.0-8.0不支持使用 rgba 模式實(shí)現(xiàn)透明度,可使用 IE 濾鏡處理,如:
示例代碼:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#88000000, endColorstr=#88000000);
#88000000 的前兩位數(shù)字控制透明度,取值16進(jìn)制從00 -> FF(越小越透明),00表示完全透明,F(xiàn)F就是全不透明,后面六位是色值。
progid:DXImageTransform.Microsoft.Gradient()濾鏡里的 startColorstr 參數(shù)值是 #AARRGGBB 形式的, 其中的AA是代表不透明度的十六進(jìn)制,00表示完全透明,F(xiàn)F就是全不透明,化成十進(jìn)制的范圍就是0~255,剩下的 RRGGBB 就是顏色的十六進(jìn)制代碼。
舉例如:background: rgba(125, 0, 0, .3); 表示的是30%不透明度的紅色背景。把30%的不透明度轉(zhuǎn)換成十六制呢的方法如下:先計(jì)算#AA的的十進(jìn)制x,x/255 = 3/10,解得x=3*255/10,然后再把x換算成十六進(jìn)制,約等于4C。
.0(00) .1(19) .05(0C) .15(26) .2(33) .3(4C) .25(3F) .35(59) .4(66) .5(7F) .45(72) .55(8C) .6(99) .7(B2) .65(A5) .75(BF) .8(CC) .9(E5) .85(D8) .95(F2)
請(qǐng)輸入請(qǐng)輸入0-1之間的任意數(shù)字:
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
background: rgba(0, 0, 0, 0.5);
IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|
6.0-8.0 | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
9.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>RGBA_CSS參考手冊(cè)_web前端開(kāi)發(fā)參考手冊(cè)系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test { filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000); /* IE5.5 - IE8 */ background: rgba(0, 0, 0, .5); /* 其他瀏覽器 */ zoom: 1; /* 濾鏡需要激活haslayout才能生效 */ } :root.test { filter: none; /* IE9下需要關(guān)閉濾鏡,否則會(huì)與背景色同時(shí)生效 */ } </style> </head> <body> <div class="test">此行的背景色為50%透明度的黑色</div> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例