CSS3與濾境(4)-圖像濾境

圖像濾境指的是對物件(通常是圖片)進行特效處理,前面介紹過的透明度陰影也是其中一種。CSS3並沒有特別針對圖像濾境做太多的加強,只有增加最常用的透明度與陰影,所以這裡所要介紹的圖像濾境全部都是IE濾境,在使用時必需特別注意,只有IE瀏覽器可以看見效果。

屬性名稱

Glow(光暈)、Blur(模糊)、Gray(灰階)、Invert(負片)、Xray(X光)、Wave(波浪)、Mask(遮罩)、Chroma(透明色)

Blur

說明:IE濾境,產生模糊效果。範例結果請參考這裡

屬性值:add=0不顯示、1顯示原來物件, strength=模糊強度(0~無限,預設5), direction=模糊方向(0~360,預設270)

【範例】

.img {
    filter: blur(add=1, strength=20, direction=270);
}

Chroma

說明:IE濾境,將被指定的顏色變成透明。JPG圖片較難顯示其效果。範例結果請參考這裡

屬性值:color=透明色

【範例】

.img {
    filter: chroma(color=#114CCE);
}

Glow

說明:IE濾境,在物件邊緣加上外光暈。範例結果請參考這裡

屬性值:color=光暈色, strength=光暈強度(1~255)

【範例】

.td {
    filter: glow(color=yellow, strength=5);
}

Gray

說明:IE濾境,使物件變成黑白灰階色彩。範例結果請參考這裡

【範例】

.img {
    filter: gray;
}

Invert

說明:IE濾境,使物件產生負片效果。範例結果請參考這裡

【範例】

.img {
    filter: invert;
}

Mask

說明:IE濾境,將物件內的透明區變成遮罩,非透明區則會變成透明。範例結果請參考這裡

屬性值:color=遮罩顏色

【範例】

.td {
    filter: mask(color=black);
}

Wave

說明:IE濾境,使物件產生波浪扭曲的效果。範例結果請參考這裡

屬性值:add=0不顯示、1顯示原來物件, freq=波浪頻率(產生多少完整的波浪), lightstrength=光影增強的效果(0~100,預設100), phase=正弦波的偏移量(0~360,預設100), strength=振幅大小

【範例】

.img {
    filter: wave(add=0, freq=2, lightstrength=50, phase=45, strength=10);
}

Xray

說明:IE濾境,使物件產生類似 X 光的效果。範例結果請參考這裡

【範例】

.img {
    filter: xray;
}