【CSS】半透明效果 - CSS3 rgba, hsla, filter, -ms-filter

[第一種] :內部所有物件皆透明
瀏覽器標準：

• 標準(Firefox): opacity:0~1
• IE7: filter:alpha(opacity=0~100);
• IE6: 還要再加上 zoom:1 ，不然會沒效

假設透明度65%

filter:alpha(opacity=65); opacity:0.65; zoom:1;

※當這樣的CSS放在一個 <div> 中，你會發現這個語法，就連div中的圖片、文字都會被設定為65%透明度，但有時候我們只是需要背景透明而已，只有背景透明的效果在第二種作法即可實現。

[第二種] :僅背景透明
瀏覽器標準：

• Firefox, Google Chrome : rgba(Red值, Green值, Blue值, Alpha值)
  
  
  • Red, Green, Blue值 可以是0~255的整數值，與一般 位元顏色的十進位值相同，惟這類表示法不接受十六進位值(如ff,8c)；
    也可以是0%~100%的百分比值。
    所以例如，rgb(128,128,128)=rgb(50%,50%,50%)=#808080 。
  
  
  • Alpha值
    0.0~1.0 允許小數一位的數值，
    0 :完全透明， 1 :完全不透明，
    0.7 → 70% 不透明。但W3C 沒有明確地表示是否允許小數一位以上的數值。
  
  
  • 範例
    
    

    rgba(255, 255, 255, 0.75)/*白色, 透明度75%*/
    




• Firefox, Google Chrome :hsla(hue值, saturation值, lightness值, alpha值)
  
  
  • hue值, saturation 值, lightness 值, alpha 值
    hue值: 色相值，以整數「角度」值表示。如同數學角度，負值或超過360是允許的。
    saturation值: 飽和度值，0%~100%
    lightness值: 亮度值，0%~100%
    alpha值: 透明度，0.0~1.0允許小數一位的數值。
    



• IE:
  
  
  • IE6,IE7
    
    

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′); /* IE6,IE7 */
    

    這是DXImageTransform.Microsoft.gradient濾鏡，我們首先要設定 startColorstr、endColorstr。
    在單色透明的情況下，這兩個值是相同的。他們的取值是一組 8位數 的 16進位 值。
    前2位: Alpha值，00代表完全透明；FF代表完全不透明。
    後6位: 表示這個顏色的RGB值。
  
  
  • IE8
    
    

    -ms-filter: “progid:DXImageTransform.Microsoft.gradient(startColorstr=’#99B4B490′,endColorstr=’#99B4B490′)”; /* IE8 */
    

    使用方法同上