---
tags: CSS大全
---

[filter 濾鏡](https://ithelp.ithome.com.tw/articles/10187983)
===

filter: contrast(200%) brightness(150%);

- 使用多款濾鏡，以空格分開
- 多款濾鏡的使用順序很重要（ex. 在 sepia 之後使用 grayscale 產生完全灰色的圖像）

blur
---
於圖像使用高斯模糊

filter: blur(0);
filter: blur(4px);
filter: blur(1.5rem);

- 值：高斯模糊的半徑，預設 0px
- 定義高斯函數的標準偏差值，螢幕上有多少像素相互融合

brightness
---
於圖像使用線性乘數，使其看起來更亮或更暗

filter: brightness(0);
filter: brightness(100%);

- 值：number 或 %，預設 1
- 值為 0 / 0% 全黑圖像
- 低於 1 / 100% 圖片變暗
- 值為 1 / 100% 沒有變化
- 高於 1 / 100% 圖片變亮

> [利用 filter 變換按鈕顏色](https://codepen.io/betty-hu/pen/poWKQMX)

contrast
---
調整圖像對比度

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

- 值：number 或 %，預設 1
- 值為 0 / 0% 灰色圖像
- 低於 1 / 100% 降低對比度
- 值為 1 / 100% 沒有變化
- 高於 1 / 100% 增加對比度

grayscale
---
於圖像使用灰階效果

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

- 值：number 0 ~ 1 或 %，預設 1
- 值為 0 / 0% 沒有變化
- 0 / 0% ~ 1 / 100% 灰度線性變化
- 值為 1 / 100% 灰階

hue-rotate
---
旋轉圖像的色調

filter: hue-rotate(0);
filter: hue-rotate(90deg);
filter: hue-rotate(1.5708rad);
filter: hue-rotate(0.25turn);

- 值：[角度 angle（deg 或 rad 或 grad 或 turn）](https://hackmd.io/iT4HEPGPSgaSdgkbwJiTgA?view)，預設 0
- 值小於 0 deg 減少色調
- 值為 0 deg 沒有變化
- 值大於 0 deg 增加色調

invert
---
負片效果

filter: invert(0.5);
filter: invert(50%);

- 值：number 0 ~ 1 或 %，預設 0
- 值為 0 / 0% 沒有變化
- 值為 0 / 0% ~ 1 / 100% 負片過渡變化
- 值為 1 / 100% 負片

sepia
---
懷舊效果，圖像轉為灰棕色

filter: sepia(0.5);
filter: sepia(50%);

- 值：number 0 ~ 1 或 %，預設 0
- 值為 0 / 0% 沒有變化
- 值為 0 / 0% ~ 1 / 100% 灰棕過渡變化
- 值為 1 / 100% 完全灰棕

saturate
---
調整圖像飽和度

filter: saturate(0.5);
filter: saturate(50%);
filter: saturate(5);

- 值 number 或 %，預設 1
- 值為 0 / 0% 不飽和
- 低於 1 / 100% 減少飽和度
- 值為 1 / 100% 沒有變化
- 高於 1 / 100% 增加飽和

opacity
---
等同 opacity 的效果

filter: opacity(1);
opacity: 1;

drop-shadow
---
於圖像後方增加投影

filter: drop-shadow(10px 10px 10px black);

- 類似 box-shadow，差別在於：
- box-shadow 長方形陰影
- drop-shadow 符合圖像形狀
> drop-shadow : h-shadow v-shadow blur spread color;
[類似 box-shadow 的設定，但不接受 inset 的參數](https://hackmd.io/D0kVajoUS5inr9XkMRwpRA)

需要注意[瀏覽器支援性](https://caniuse.com/?search=drop-shadow)