CSS Filters 濾鏡效果

前端 HTML 網頁製作上，CSS 濾鏡效果是常常會用到的功能之一，CSS 濾鏡效果與法使用 Filters，共有10種可以選用。

CSS 濾鏡 Filters 常常被用來處理相同的區塊或圖片，需要進行不同效果的呈現的時候，這裡舉幾個最常見的例子，一個按鈕的 hover 效果、區塊 or 圖片想呈現成灰階、想進行霧化處裡，都會用到 CSS 濾鏡 Filters。

如何使用 CSS Filters 濾鏡效果

使用 CSS Filters 濾鏡，語法為 –webkit-filter，假設我們要使用 CSS Filters 濾鏡，讓CSS 使圖片模糊、霧化圖片，語法如下 :

.css-filters-img {
  filter: blur(5px);
  -webkit-filter: blur(5px); // 舊語法
}

CSS Filters 濾鏡效果可以同時使用多個，效果與效果間用空白隔開即可，例如我們要灰階與模糊，

.css-filters-img {
  filter</span>: blur(5px) grayscale(1);
  -webkit-filter: blur(5px) grayscale(1); // 舊語法
}

CSS Filters 濾鏡效果

blur 模糊

讓圖片或元素產生模糊效果，單位為常用的 px, em , rem …等。

.css-filters-img {
  filter: blur(5px);
  -webkit-filter: blur(5px); // 舊語法
}

brightness 亮度

讓圖片或元素產增加亮度，值介於 0~1之間(0%~100%)。

.css-filters-img {
  filter: brightness(.3);
  -webkit-filter: brightness(.3); // 舊語法
}

brightness(.3)

brightness(.6)

contrast 對比

讓圖片或元素產增加亮度，100% 為原本對筆值(顏色不變)，小於 100% 為減少對比，大於100% 則增加對比。

.css-filters-img {
filter: contrast(300%);
-webkit-filter: contrast(300%); // 舊語法
}

drop-shadow 下拉陰影

幫圖片或元素加上陰影，與 box-shadow 不同，drop-shadow 可以針對透明圖內不透明的區域加上陰影，而 box-shadow 只能針對該物件矩形加上陰影。

.css-filters-img {
filter: drop-shadow(5px 10px 15px #000);
-webkit-filter: drop-shadow(5px 10px 15px #000); // 舊語法
}

grayscale 灰階

幫圖片或元素轉換為黑白色調，值介於0~1之間(0%~100%)，可自行調整灰階比例，0 (0%) 表示維持不變，1代表轉灰階。

.css-filters-img {
filter: grayscale(1);
-webkit-filter: grayscale(1); // 舊語法
}

grayscal(0.5)

grayscal(1)

hue-rotate 色相旋轉

將圖片中的顏色色相，依據色相圈進行旋轉，值介於 0~360 deg。

.css-filters-img {
filter: hue-rotate(45deg);
-webkit-filter: hue-rotate(45deg); // 舊語法
}

hue-rotate(90deg)

hue-rotate(180deg)

hue-rotate(250deg)

invert 負片

將圖片中的顏色轉成類似相片負片效果，值介於0~1之間(0~100%)。

.css-filters-img {
filter: invert(1);
-webkit-filter: invert(1); // 舊語法
}

invert(.3)

invert(.7)

invert(1)

opacity 不透明

調整圖片或元素的不透明度，值介於0~1之間(0%~100%)，1 (100%)為不透明，0 (0%)為透明。

.css-filters-img {
filter: opacity(.5);
-webkit-filter: opacity(.5); // 舊語法
}

saturate 飽和

調整圖片或元素的顏色飽和度，值介於0~1之間(0%~100%)，小於 100% 為減少飽和，大於100% 則增加飽和。

.css-filters-img {
filter: saturate(1.5);
-webkit-filter: saturate(1.5); // 舊語法
}

saturate(.5)

saturate(1)

saturate(2)

sepia 懷舊

會再要調整的圖片或元素上，覆蓋一層泛黃色濾鏡，模擬出復古還舊的風格，值介於0~1之間(0%~100%)。

.css-filters-img {
filter: sepia(.5);
-webkit-filter: sepia(.5); // 舊語法
}

saturate(.5)

saturate(1)

使用 CSS Filters 濾鏡會有三個優點：

瀏覽器兼容 (Browser compatibility)

使用CSS Filters 濾鏡效果時，你需要注意瀏覽器版本的兼容性。

資料來源 : MDN CSS Filter