久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

27
2017/06

rgba()用法如何兼容ie8?

發(fā)布時(shí)間:2017-06-27 14:04:22
發(fā)布者:jiangbing
瀏覽量:
0

在我們文匯軟件的愛加海外月子中心的項(xiàng)目中遇到了一個(gè)問題,要在一個(gè)頁(yè)面中設(shè)置一個(gè)半透明的黑色div。這個(gè)貌似不是難題,只需要給這個(gè)div設(shè)置如下的屬性即可:

background: rgba(0,0,0,.5);

blob.png

但是要兼容到ie8,這個(gè)就有點(diǎn)頭疼了。因?yàn)閕e8不支持rgba()函數(shù)。下面總結(jié)一下rgba()函數(shù)的含義。

rgba的含義,r代表red,g代表green,b代表blue,紅綠藍(lán)是三原色。所有顏色都可以由這三種顏色拼合而成。a代表透明度。比如rgba(0,0,0,0.5)就是透明度為0.5的黑色。在現(xiàn)代瀏覽器中是支持rgba的。但是在ie8等古董級(jí)瀏覽器中是不支持的rgba的,ie8只能勉強(qiáng)支持rgb()函數(shù)(即去掉了透明度,只能表示顏色)。

后來也是各種找,得知可以使用ie的filter來解決這個(gè)問題,css代碼如下:

background: rgba(0,0,0,.5);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);

第二句話的意思是當(dāng)上一行的透明度不起作用的時(shí)候執(zhí)行。這句話的意思本來是用來做漸變的,但是這個(gè)地方不需要漸變,所以兩個(gè)顏色都設(shè)置成了相同的顏色。

注意,這個(gè)顏色“#7f000000”是由兩部分組成的。第一部是#號(hào)后面的7f 。是rgba透明度0.5的IEfilter值。從0.1到0.9每個(gè)數(shù)字對(duì)應(yīng)一個(gè)IEfilter值。對(duì)應(yīng)關(guān)系如下:

blob.png

第二部分是7f后面的六位,這個(gè)是六進(jìn)制的顏色值,要跟rgb函數(shù)中的取值相同。比如rgb(0,0,0)對(duì)應(yīng)#000000;都是黑色。

這樣,rgba的用法就可以兼容IE8了。

演示地址:http://www.geizy.cn/d/demo/rgba/

關(guān)鍵詞:
返回列表