CSS Filter Effects 屬性

CSS Filter Effects 調整圖片顏色飽度和顏色偏移或模糊等圖形效果應用。

有些類似 Photoshop 圖片調整效果。

saturate 亮度

亮度 1 等於 100% 表示亮度不變；小於 1 則降低亮度；亮度於 0% 至 100% 之間。

filter:brightness(0.5);

contrast 對比度

對比度 1 等於 100% 表示對比度不變；小於 1 則降低對比度；對比度於 0% 至 100% 之間。

filter:contrast(0.2);

saturate 顏色飽和度、鮮艷度

飽和度 1 等於 100% 表示顏色不變；小於 1 則降低飽和度；顏色飽和度於 0% 至 100% 之間。

filter:saturate(0.2);

sepia 舊照片偏黃色效果

舊照片 1 等於 100% 表示顏色不變；小於 1 則偏向舊照片；其值於 0% 至 100% 之間。

filter:sepia(0.8);

grayscale 灰階效果

灰階度 1 等於 100% 表示灰階不變；小於 1 則灰階度於 0% 至 100% 之間。

灰階度 0 等於 0% 表示以灰階顯示。

filter:grayscale(0.9);

invert 負片效果

負片效果 1 等於 100% 表示灰階不變；小於 1 則增加負片效果於 0% 至 100% 之間。

filter:invert(0.9);

hue-rotate 色相旋轉

旋轉色相環可以產生色調變化效果。旋轉色相範圍使用角度 (0deg~360deg) 來控制。

filter:hue-rotate(180deg);

opacity 透明程度

0 表示完全透明、1 表示完全不透明。

filter:opacity(0.3);

blur 模糊程度

照片失焦效果、設定模糊的程度。設定單位、例如：px、em。

filter:blur(5px);