实现背景透明的方法，兼容ie6/7/8等浏览器

          今天登录支付宝&＃xff0c;发现支付宝首页首页改版了&＃xff0c;给人一种清新&＃xff0c;自然&＃xff0c;简洁的感觉&＃xff0c;另外发现支付首页的登录界面用的一种半透明的背景&＃xff0c;刚开始以为是用的rgba方法&＃xff0c;但是发现在ie6、7、8中登录界面的背景也是同样的半透明形式&＃xff0c;于是研究了一下代码样式&＃xff0c;然后自己写了一个例子&＃xff0c;用来跟大家一起分享学习。

   主要运用了rgba和filter技术&＃xff1a;

html 代码如下&＃xff1a;

css代码如下&＃xff1a;

   body{ background:url(images/bigben.jpg);}
.content{ width:300px; height:300px; margin:40px auto; background:rgba(0,0,0,0.4); //

  padding:10px; color:#fff;
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType&＃61;0,

StartColorStr&＃61;&＃39;#66000000&＃39;,EndColorStr&＃61;&＃39;#66000000&＃39;);}
:root .content{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType&＃61;0,StartColorStr&＃61;&＃39;#00000000&＃39;,

EndColorStr&＃61;&＃39;#00000000&＃39;)\9}

//解决ie9的bug问题&＃xff0c;使ie9去掉filter功能方法直接使用rgba方法&＃xff0c;

CSS 之 FILTER: progid:DXImageTransform.Microsoft.gradient2009-02-23 11:05语法格式&＃xff1a;

      filter:progid:DXImageTransform.Microsoft.Gradient
            (enabled&＃61;bEnabled,startColorStr&＃61;iWidth,endColorStr&＃61;iWidth)

属性&＃xff1a;

      enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。   true | false
      true: 默认值。滤镜激活。
      false:滤镜被禁止。

      GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0
      1:默认值。水平渐变。
      0:垂直渐变。

      StartColorStr:可读写。可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值&＃xff0c; GG 指定绿色值&＃xff0c; BB 指定蓝色值&＃xff0c;参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。  

      StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。

      EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。  

      EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时&＃xff0c;也可以用十六进制格式&＃xff1a; 0xAARRGGBB 。

  没用opacity解决透明的方法主要是因为它容易把内容也半透明话&＃xff0c;这种滤镜的方法正好解决了那个bug,实现ie中背景透明&＃xff0c;内容不透明。