CSS Filter Effects 屬性、CSS 濾鏡效果

CSS Filter Effects 調整圖片顏色飽度和顏色偏移或模糊等圖形效果處理,例如復古、版畫、油畫、老照片應用。通過使用內建的 CSS 函數 brightness 亮度、blurgrayscalehue-rotate 可以調整圖片顏色亮度、飽度和顏色偏移或模糊等圖形效果處理。可以用來改變圖片、背景或邊框的外觀,使其更多彈性化的直接圖片處理或符合設計需求。

設置元素的視覺效果、用於圖像內容類似 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);

CSS Filter Effects 目前已經被大多數的瀏覽器支持,並且有許多網站已經開始使用它們來增強網頁的效果表現。可以在網頁上實現各種圖像處理效果的技術例如模糊、灰度、色調、對比度等。CSS 濾鏡效果可以讓網頁設計在不使用圖片或 JavaScript 的情況下,創造出更有動態的視覺效果,可以讓網站呈現出更多元和豐富的視覺效果。CSS 濾鏡效果目前已經被大多數的現代瀏覽器支持,並且有許多網站已經開始使用它們來增強網頁的表現。例如使用模糊濾鏡來創造出深度感或聚焦效果,或者使用 CSS Filter Effects 色調濾鏡來改變網頁中呈現的圖片的色彩風格,例如需要表達圖片中的對比的情況。