實作背景透明的方法，相容ie6/7/8等浏覽器

          今天登入支付寶，發現支付寶首頁首頁改版了，給人一種清新，自然，簡潔的感覺，另外發現支付首頁的登入界面用的一種半透明的背景，剛開始以為是用的rgba方法，但是發現在ie6、7、8中登入界面的背景也是同樣的半透明形式，于是研究了一下代碼樣式，然後自己寫了一個例子，用來跟大家一起分享學習。

   主要運用了rgba和filter技術：

html 代碼如下：

<div class="content">前端藍楓</div>

css代碼如下：

   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=0,

StartColorStr='#66000000',EndColorStr='#66000000');}

:root .content{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#00000000',

EndColorStr='#00000000')\9}

//解決ie9的bug問題，使ie9去掉filter功能方法直接使用rgba方法，

CSS 之 FILTER: progid:DXImageTransform.Microsoft.gradient2009-02-23 11:05文法格式：

      filter:progid:DXImageTransform.Microsoft.Gradient

            (enabled=bEnabled,startColorStr=iWidth,endColorStr=iWidth)

屬性：

      enabled:可選項。布爾值(Boolean)。設定或檢索濾鏡是否激活。   true | false

      true: 預設值。濾鏡激活。

      false:濾鏡被禁止。

      GradientType:可讀寫。整數值(Integer)。設定或檢索色彩漸變的方向。1 | 0

      1:預設值。水準漸變。

      0:垂直漸變。

      StartColorStr:可讀寫。可選項。字元串(String)。設定或檢索色彩漸變的開始顔色和透明度。其格式為 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 為十六進制正整數。取值範圍為 00 - FF 。 RR 指定紅色值， GG 指定綠色值， BB 指定藍色值，參閱 #RRGGBB 顔色機關。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值範圍的值将被恢複為預設值。取值範圍為 #FF000000 - #FFFFFFFF 。預設值為 #FF0000FF 。不透明藍色。  

      StartColor:可讀寫。整數值(Integer)。設定或檢索色彩漸變的開始顔色。 取值範圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。

      EndColorStr:可讀寫。字元串(String)。設定或檢索色彩漸變的結束顔色和透明度。參閱 startColorStr 屬性。預設值為 #FF000000 。不透明黑色。  

      EndColor:可讀寫。整數值(Integer)。設定或檢索色彩漸變的結束顔色。 取值範圍為 0 - 4294967295 。 0 為透明。 4294967295 為不透明白色。當在腳本中使用此特性時，也可以用十六進制格式： 0xAARRGGBB 。

  沒用opacity解決透明的方法主要是因為它容易把内容也半透明話，這種濾鏡的方法正好解決了那個bug,實作ie中背景透明，内容不透明。

預覽的效果在各個主要的浏覽器中大緻如下：