天天看點

相容性背景顔色半透明CSS代碼(不影響内部子元素)

如何簡單相容性的實作父元素是半透明背景色,而子元素不受影響。

相容所有浏覽器的背景顔色半透明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) 半透明濾鏡,因為這種半透明屬性會讓子元素也跟着半透明。

相容性背景顔色半透明CSS代碼(不影響内部子元素)
相容性背景顔色半透明CSS代碼(不影響内部子元素)

繼續閱讀