css中filter:alpha透明度使用

標籤：

css中filter:alpha透明度使用
    使用filter可以設定透明度，filter:alpha在IE下是沒有問題的，要支援firefox就需要使用-moz-opacity，下面有個不錯的樣本，大家可以參考下

   filter:alpha(opacity=0, finishopacity=100, style=2, startx=0, starty=5, finishx=200, finisyY=195) 

    opacity：透明度層級，範圍是0-100，0代表完全透明，100代表完全不透明。
    finishopacity：設定漸層的透明效果時，用來指定結束時的透明度，範圍也是0 到 100。
    style：設定漸層透明的樣式，值為0代表統一形狀、1代表線形、2代表放射狀、3代表長方形。
    startx和starty：代表漸層透明效果的開始X和Y座標。
    finishx和finishy：代表漸層透明效果結束X和Y 的座標。
    對於IE上述方法是沒有問題的。若要支援firefox請參照下面：

    filter:alpha(opacity=50); /* IE */    -moz-opacity:0.5; /* Moz + FF */    opacity: 0.5; /* 支援CSS3的瀏覽器（FF 1.5也支援）*/ 

    簡單解釋，IE使用私人屬性filter:alpha(opacity)，Moz Family使用私人屬性-moz-opacity，而標準的屬性是opacity（CSS 3, Moz Family部分支援CSS3）。後面的數值是透明度，使用百分比或者小數（alpha(opacity)）使用大於0小於100的數值，其實也是百分比）。




關於filter的引申
一、CSS3 filter
    CSS3 Filter是W3C CSS filter Effect 1.0中定義的濾鏡，一個使用CSS來改變圖片和HTML的模糊度、亮度、對比、飽和度等等效果的過濾器。

二、使用方法：
    filter:filter(value);
    filter:filter(value) filter(value) filter(value);/* 多屬性 */

三、具體執行個體
    1、Blur（模糊）
        映像模糊參數單位:px/em/pt。 樣本：
        
        filter: blur(5px);
        -webkit-filter: blur(5px);
        -moz-filter: blur(5px);
        -o-filter: blur(5px);
        -ms-filter: blur(5px);
        
    2、Brightness（亮度）
        亮度參數:”-1″至”1″,值越大亮度越高。樣本：
        
        filter: brightness(0.5);
        -webkit-filter: brightness(0.5);
        -moz-filter: brightness(0.5);
        -o-filter: brightness(0.5);
        -ms-filter: brightness(0.5);
        
    3、Saturation（飽和度）
        飽和度參數:半分比,以100%為中間值。 樣本：
        
        filter: saturate(50%);
        -webkit-filter: saturate(50%);
        -moz-filter: saturate(50%);
        -o-filter: saturate(50%);
        -ms-filter: saturate(50%);

    4、Hue Rotate（色相）
        色相參數:角度值0—360。 樣本：
        
        filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
        -moz-filter: hue-rotate(180deg);
        -o-filter: hue-rotate(180deg);
        -ms-filter: hue-rotate(180deg);

    5、Contrast（對比）
        對比參數:百分比；以100%為中間值。樣本：
        
        filter: contrast(50%);
        -webkit-filter: contrast(50%);
        -moz-filter: contrast(50%);
        -o-filter: contrast(50%);
        -ms-filter: contrast(50%);

    6、Invert（反相）
        反相參數：百分比；0%-100%。樣本：
        
        filter: invert(100%);
        -webkit-filter: invert(100%);
        -moz-filter: invert(100%);
        -o-filter: invert(100%);
        -ms-filter: invert(100%);

    7、Grayscale（灰階）
        灰階參數:百分比 0%-100%。樣本：
        
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        Sepia（懷舊）

    8、Sepia（懷舊）
        懷舊參數:百分比 0%-100%。樣本：
        
        filter: sepia(100%);
        -webkit-filter: sepia(100%);
        -moz-filter: sepia(100%);
        -o-filter: sepia(100%);
        -ms-filter: sepia(100%);
        

css中filter:alpha透明度使用