如何簡單相容性的實作父元素是半透明背景色,而子元素不受影響。
相容所有浏覽器的背景顔色半透明CSS代碼:
注意:startColorStr 和 endColorStr 的值,前兩位是十六進制的透明度,後面六位是十六進制的顔色。
其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進制正整數。取值範圍為 00 - FF 。 RR 指定紅色值, GG 指定綠色值, BB 指定藍色值,參閱 #RRGGBB 顔色機關。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值範圍的值将被恢複為預設值。
2位透明度的換算方法:x=alpha*255 ,将計算的結果 x 轉換成十六進制即可。
js換算16進制方法: x.toString(16)
例如:上面的 0.25 透明度,換算為IE的AA透明度: var a = 0.25 * 255 = 63.75 ~= 64; a.toString(16) = 40
Demo示例:
思想:現代浏覽器使用 CSS3 RGBA 實作半透明背景色,IE使用 漸變濾鏡 filter: progid:DXImageTransform.Microsoft.Gradient 實作半透明。
注意:不能使用 opacity:0.5 屬性或是 IE filter:alpha(opacity=50) 半透明濾鏡,因為這種半透明屬性會讓子元素也跟着半透明。
