CSS filter 濾鏡使用方法教學

CSS 能夠用來建立很棒的視覺效果，除了可以透過一般的圖片工具來達成濾鏡效果，但是如果是使用網頁來建立編輯的話，可以透過 CSS 濾鏡來進行製作濾鏡效果，不會透過圖片直接進行編輯而是透過CSS就能完成，在短時間內就能建立令人驚嘆的效果，本篇文章會介紹一些濾鏡的使用方法。

什麼是 CSS 濾鏡？

CSS 濾鏡是一種用於修改視覺效果的 CSS 屬性。可以用來改變圖像或 HTML 元素的顏色、亮度、對比度、模糊度等屬性，從而建立出各種各樣的視覺效果，CSS 濾鏡不需要透過圖像編輯工具就能實現這些效果。

如何使用 CSS 濾鏡？

首先，需要選擇一個要使用濾鏡效果的 HTML、圖片元素，不過大多以圖片設置濾鏡的場合會比較多。

模糊：使用 blur() 來模糊元素。

使用 filter:blur(0) 時是以半徑的方式進行模糊。

filter:blur(0);
filter:blur(10px);
{filter:blur(1.7em);

亮度：使用 brightness() 函数來調整元素的亮度。

依照需求使用百分比或者數值的方式顯示，100%為原始也可以超過100%，同時也可依照個人需求往100％以下調整變暗。可以使用數值是從0~10，像是 filter:brightness(0.3) 則代表0.3則代表70%的暗度。

filter:brightness(100%);
filter:brightness(50%);
filter:brightness(0.3);

對比度：使用 contrast() 來調整元素的對比度。

使用百分比或者數值的方式顯示，100%為原始也可以超過100%，同時也可依照個人需求往100％以下調整。可以使用數值是從0~10，像是 filter-contrast(0.6) 代表60%的對比度。

filter:contrast(100%);
filter:contrast(50%);
filter:contrast(0.6);

色彩反轉：使用 invert() 函数來反轉元素的顏色。

依照需求使用百分比或者數值的方式顯示，100%為原始圖片也可以超過100%，同時也可依照個人需求往100％以下調整。可以使用數值是從0~10，像是 filter-invert(0) 代表沒有設定反轉元素。

filter:contrast(100%);
filter:contrast(0);
filter:contrast(0.75);

灰度：使用 grayscale() 函数來將元素轉換為灰階影像。

依照需求使用百分比或者數值的方式顯示，100%為原始圖片也可以超過100%，同時也可依照個人需求往100％以下調整。可以使用數值是從0~10，像是 filter:grayscale(0.75) 就會顯示 75%呈現灰階影像。

filter:grayscale(100%);
filter:grayscale(0);
filter:grayscale(0.75);

飽和度：使用 saturate() 函数來調整元素的飽和度。

依照需求使用百分比或者數值的方式顯示，100%為原始圖片也可以超過100%，同時也可依照個人需求往100％以下調整。

filter:saturate(100%);
filter:saturate(0);
filter:saturate(0.75);

色調：使用 hue-rotate() 函数來調整元素的色調。

依照需求使用百分比或者數值的方式顯示，100%為原始圖片也可以超過100%，同時也可依照個人需求往100％以下調整。

filter:hue-rotate(0deg);
filter:hue-rotate(90deg);
filter:hue-rotate(180deg);

相關文章