CSS Filter Effects 屬性、CSS 濾鏡效果

CSS Filter Effects 調整圖片顏色飽度和顏色偏移或模糊等圖形效果處理,例如復古、版畫、油畫、老照片應用。

設置元素的視覺效果、用於圖像內容類似 Photoshop 圖片調整效果,於圖片標籤中加入 filter 濾鏡參數如對比度、轉為灰度圖、模糊或顏色調整影像。使用 box-shadow 和 filter:drop-shadow 為 PNG 透明元素新增陰影的差異。



brightness 亮度

亮度 1 等於 100% 表示亮度不變;小於 1 則降低亮度;亮度於 0% 至 100% 之間。
應用 brightness 亮度的效果例如滑鼠 hover 強調當前將選中的內容。

imgElement.style.filter = "brightness(0.5)";
filter:brightness(0.5);



contrast 對比度

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

imgElement.style.filter = "contrast(0.5)";
filter:contrast(0.5);



saturate 顏色飽和度、鮮艷度

飽和度 1 等於 100% 表示顏色不變;小於 1 則降低飽和度;顏色飽和度於 0% 至 100% 之間。
顏色飽和度 saturate 亦可在版面上圖片產生互動時不同的效果。

imgElement.style.filter = "saturate(0.5)";
filter:saturate(0.5);



sepia 舊照片偏黃色效果

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

imgElement.style.filter = "sepia(0.5)";
filter:sepia(0.5);



grayscale 灰階效果

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

imgElement.style.filter = "grayscale(0.5)";
filter:grayscale(0.5);



invert 負片效果

負片效果 1 等於 100% 表示灰階不變;小於 1 則增加負片效果於 0% 至 100% 之間。50% 則剛好看不到圖片。
負片效果 invert 反轉色亦可應用到 hover 效果創造力、增加互動的反差效果。

imgElement.style.filter = "invert(0.6)";
filter:invert(0.6);



hue-rotate 色相旋轉

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

imgElement.style.filter = "hue-rotate(180deg)";
filter:hue-rotate(180deg);



opacity 透明程度

0 表示完全透明、1 表示完全不透明,與 CSS 使用 opacity:0.5 屬性類似。

imgElement.style.filter = "opacity(0.5)";
filter:opacity(0.5);



blur 模糊程度

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

imgElement.style.filter = "blur(3px)";
filter:blur(3px);