您好,欢迎访问一九零五行业门户网

兼容性背景颜色半透明CSS代码(不影响内部子元素)

如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响。
兼容所有浏览器的背景颜色半透明css代码:
background-color: rgba(0, 0, 0, .25);filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#40000000,endcolorstr=#40000000);
注意: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示例:
class=menu-nav-bg> 我的首页 | 我的微博

思想:现代浏览器使用 css3 rgba 实现半透明背景色,ie使用 渐变滤镜 filter: progid:dximagetransform.microsoft.gradient 实现半透明。
注意:不能使用 opacity:0.5 属性或是 ie filter:alpha(opacity=50) 半透明滤镜,因为这种半透明属性会让子元素也跟着半透明。
其它类似信息

推荐信息