最近在项目中遇到了浏览器兼容问题,透明背景图在IE或360兼容模式下没有效果,以前都是网上搜到结果,直接用了,并没有深入的去理解和利用,总会在下一次使用的时候忘记。为了让自己在前端方面学习更有成效,想想还是记录下来比较好,做个总结,还有不完善的地方还请多指教!
知识要点:
CSS3的rgba()浏览器兼容
1.rgba()颜色值目前得到以下浏览器的支持:IE9+、Firefox3+、Chrome、Safari以及Opera10+
2.rgba颜色值是rgb颜色值的一个扩展,增加一个alpha,它规定了对象的透明度
3.rgba()颜色值的规定是:rgba(red,green,blue,alpha),alpha参数介于0.0(完全透明)和1(完全不透明)的数值
例:
p{2background-color:rgba(0,0,0,0.5)3}
显示效果:
rgba()中的前三个数值越接近0,颜色显示越接近黑色,反之越接近255,颜色显示越接近白色。但是该设置在IE+以下或360兼容模式下,背景透明效果都是无效的。360兼容模式保留了你电脑里本身的IE内核,如果你的电脑浏览器是IE7,兼容模式下就相当于是IE7,同理可得。所以,为了兼容360兼容模式,就得兼顾IE浏览器,在IE浏览器下,透明背景色的设置如下:
p{filter:Alpha(opacity=50);/*只支持IE6、7、8、9*/position:static;*zoom:1; }
IE6、7、8只能设置position:static(默认属性) ,否则会导致子元素继承Alpha值,激活IE6、7的haslayout属性,让它读懂Alpha,设置子元素为相对定位,可让子元素不继承Alpha值,保证字体颜色不透明。