【学习进步之路】-【浏览器兼容】透明背景图IE、360浏览器不兼容

　　最近在项目中遇到了浏览器兼容问题，透明背景图在IE或360兼容模式下没有效果，以前都是网上搜到结果，直接用了，并没有深入的去理解和利用，总会在下一次使用的时候忘记。为了让自己在前端方面学习更有成效，想想还是记录下来比较好，做个总结。

　　知识要点：

1. CSS3的rgba（）浏览器兼容

• rgba（）颜色值目前得到以下浏览器的支持：IE9+、Firefox3+、Chrome、Safari以及Opera10+
• rgba颜色值是rgb颜色值的一个扩展，增加一个alpha，它规定了对象的透明度
• rgba（）颜色值的规定是：rgba（red,green,blue,alpha），alpha参数介于0.0（完全透明）和1（完全不透明）的数值

例：

 p{
   background-color:rgba(0,0,0,0.5)
 }

显示效果:

rgba()中的前三个数值越接近0，颜色显示越接近黑色，反之越接近255，颜色显示越接近白色。但是该设置在IE+以下或360兼容模式下，背景透明效果都是无效的。360兼容模式保留了你电脑里本身的IE内核，如果你的电脑浏览器是IE7，兼容模式下就相当于是IE7，同理可得。所以，为了兼容360兼容模式，就得兼顾IE浏览器，在IE浏览器下，透明背景色的设置如下：

p{
  filter:Alpha(opacity=50);/* 只支持IE6、7、8、9 */
  position:static;
  *zoom:;
}

IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值,激活IE6、7的haslayout属性，让它读懂Alpha,设置子元素为相对定位，可让子元素不继承Alpha值，保证字体颜色不透明。