根據caniuse(http://caniuse.com/#search=rgba),rgba兼容性爲IE9以及以上瀏覽器。css
實例代碼:html
1 <!doctype html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8" /> 6 <title>rgba 兼容性處理</title> 7 <style type="text/css"> 8 * { 9 margin: 0; 10 padding: 0; 11 } 12 13 .parent { 14 width: 400px; 15 height: 400px; 16 margin: 100px; 17 font-size: 20px; 18 color: #FF0000; 19 border: 1px solid red; 20 background-color: rgba(0, 0, 0, 0.5); 21 } 22 </style> 23 </head> 24 25 <body> 26 <div class="parent"> 27 rgba 28 </div> 29 </body> 30 31 </html>
chrome瀏覽器效果:chrome
IE8瀏覽器效果(無背景):瀏覽器
1 .parent { 2 width: 400px; 3 height: 400px; 4 margin: 100px; 5 font-size: 20px; 6 color: #FF0000; 7 border: 1px solid red; 8 background: rgba(0, 0, 0, 0.5); 9 /*下一句關鍵設置*/ 10 filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000, endcolorstr=#7f000000); 11 }
設置filter屬性目的是上一行的透明度不起做用的時候執行,filter: progid:DXImageTransform.Microsoft.gradient是用來作漸變的,可是這個地方不須要漸變,因此兩個顏色都設置成了相同的顏色。函數
第一部是#號後面的7f 。是rgba透明度0.5的IEfilter值。從0.1到0.9每一個數字對應一個IEfilter值。對應關係以下:spa
即:alpha*255獲得的值再轉換爲16進制便可。3d
第二部分是7f後面的六位 是六進制的顏色值,跟rgb函數中的取值相同,好比rgb(255,255,255)對應#ffffff。code
總結:至此完成IE8以及如下IE瀏覽器RGBA兼容性處理。orm