CSS3 filter(濾鏡) 屬性

filter 屬性定義了元素(通常是)的可視效果(例如：模糊與飽和度)。

定義和使用

CSS 語法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
 

提示: 使用空格分隔多個濾鏡。

Filter 函式

注意: 濾鏡通常使用百分比 (如：75%), 當然也可以使用小數來表示 (如：0.75)。檢視相關函式使用

示例

修改所有圖片的顏色為黑白 (100% 灰度):

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

這意味著當你有彩色logo圖片時，UI就不必再製作灰色的logo了。

參考文件

檢視瀏覽器支援