CSS 樣式CSS 濾鏡效果屬性, CSS Filter Effects

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);