兼容全部瀏覽器的背景顏色半透明CSS代碼:css
background-color: rgba(0, 0, 0, .25); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);
注意:startColorStr 和 endColorStr 的值,前兩位是十六進制的透明度,後面六位是十六進制的顏色。html
其格式爲 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 爲十六進制正整數。取值範圍爲 00 - FF 。 RR 指定紅色值, GG 指定綠色值, BB 指定藍色值,參閱 #RRGGBB 顏色單位。 AA 指定透明度。 00 是徹底透明。 FF 是徹底不透明。超出取值範圍的值將被恢復爲默認值。瀏覽器
2位透明度的換算方法:x=alpha*255 ,將計算的結果 x 轉換成十六進制便可。spa
js換算16進制方法: x.toString(16)code
例如:上面的 0.25 透明度,換算爲IE的AA透明度: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40orm
Demo示例:htm
<style type="text/css"> .menu-nav-bg { background-color: rgba(0, 0, 0, .25); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000); } /* css hack: rgba background with IE filter alternative: IE9 renders both! */ .menu-nav-bg:not([dummy]) { filter: progid:DXImageTransform.Microsoft.Gradient(enabled='false'); } /* 對於IE9,除了使用 :not([dummy]) hack 外,還可使用 :root,推薦使用這個 * :root 選擇器已經被現代主流瀏覽器支持了,除了IE8及如下IE瀏覽器 */ :root .menu-nav-bg { filter: progid:DXImageTransform.Microsoft.Gradient(enabled='false'); } </style> <div class="menu-nav-bg"> <a href="#">個人首頁</a> | <a href="#">個人微博</a> </div>
思想:現代瀏覽器使用 CSS3 RGBA 實現半透明背景色,IE使用 漸變濾鏡 filter: progid:DXImageTransform.Microsoft.Gradient 實現半透明。ci
注意:不能使用 opacity:0.5 屬性或是 IE filter:alpha(opacity=50) 半透明濾鏡,由於這種半透明屬性會讓子元素也跟着半透明。it