原網頁http://blog.csdn.net/leihope_/article/details/70158902 要在一個頁面中設置一個半透明的白色div。這個貌似不是難題,只需要給這個div設置如下的屬性即可: 但是要相容到ie8。這個就有點蛋疼了。因為ie8不支持rgba()函數。下麵我們總結 ...
原網頁http://blog.csdn.net/leihope_/article/details/70158902
要在一個頁面中設置一個半透明的白色div。這個貌似不是難題,只需要給這個div設置如下的屬性即可:
background: rgba(255,255,255,0.1);
但是要相容到ie8。這個就有點蛋疼了。因為ie8不支持rgba()函數。下麵我們總結一下rgba()函數的含義。
rgba的含義,r代表red,g代表green,b代表blue,紅綠藍是三原色。所有顏色都可以由這三種顏色拼合而成。a代表透明度。比如rgba(255,255,255,0.1)就是透明度為0.1的白色。在現代瀏覽器中是支持rgba的。但是在ie8等古董級瀏覽器中是不支持的rgba的,ie8只能勉強支持rgb()函數(即去掉了透明度,只能表示顏色)。
所以在ie8中設置半透明就要費點腦子了。從大神那裡得知可以使用ie的filter來解決這個問題,css代碼如下:
background: rgba(255,255,255,0.1); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19ffffff,endColorstr=#19ffffff);
第二句話的意思就是當上一行的透明度不起作用的時候執行。這句話的意思本來是用來做漸變的。但是這個地方不需要漸變。所以兩個顏色都設置成了相同的顏色。
大家註意,這個顏色“#19ffffff”是由兩部分組成的。
第一部是#號後面的19 。是rgba透明度0.1的IEfilter值。從0.1到0.9每個數字對應一個IEfilter值。對應關係如下:
第二部分是19後面的六位 。這個是六進位的顏色值。要跟rgb函數中的取值相同。比如rgb(255,255,255)對應#ffffff;都是白色。
到這裡,rgba的用法就可以相容IE8了。