---
# System prepended metadata

title: '[filter 濾鏡](https://ithelp.ithome.com.tw/articles/10187983)'
tags: [CSS]

---

---
tags: CSS大全
---

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

```cssx
filter: contrast(200%) brightness(150%);
```
- 使用多款濾鏡，以空格分開
- 多款濾鏡的使用順序很重要（ex. 在 sepia 之後使用 grayscale 產生完全灰色的圖像）

blur
---
於圖像使用高斯模糊
```cssx
filter: blur(0);
filter: blur(4px);
filter: blur(1.5rem);
```
- 值：高斯模糊的半徑，預設 0px
    - 定義高斯函數的標準偏差值，螢幕上有多少像素相互融合

brightness
---
於圖像使用線性乘數，使其看起來更亮或更暗
```cssx
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
---
調整圖像對比度
```cssx
filter: contrast(0);
filter: contrast(100%);
```
- 值：number 或 %，預設 1
    - 值為 0 / 0% 灰色圖像
    - 低於 1 / 100% 降低對比度
    - 值為 1 / 100% 沒有變化
    - 高於 1 / 100% 增加對比度

grayscale
---
於圖像使用灰階效果
```cssx
filter: grayscale(0);
filter: grayscale(100%);
```
- 值：number 0 ~ 1 或 %，預設 1
    - 值為 0 / 0% 沒有變化
    - 0 / 0% ~ 1 / 100% 灰度線性變化
    - 值為 1 / 100% 灰階

hue-rotate
---
旋轉圖像的色調
```cssx
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
---
負片效果
```cssx
filter: invert(0.5);
filter: invert(50%);
```
- 值：number 0 ~ 1 或 %，預設 0
    - 值為 0 / 0% 沒有變化
    - 值為 0 / 0% ~ 1 / 100% 負片過渡變化
    - 值為 1 / 100% 負片

sepia
---
懷舊效果，圖像轉為灰棕色
```cssx
filter: sepia(0.5);
filter: sepia(50%);
```
- 值：number 0 ~ 1 或 %，預設 0
    - 值為 0 / 0% 沒有變化
    - 值為 0 / 0% ~ 1 / 100% 灰棕過渡變化
    - 值為 1 / 100% 完全灰棕

saturate
---
調整圖像飽和度
```cssx
filter: saturate(0.5);
filter: saturate(50%);
filter: saturate(5);
```
- 值 number 或 %，預設 1
    - 值為 0 / 0% 不飽和
    - 低於 1 / 100% 減少飽和度
    - 值為 1 / 100% 沒有變化
    - 高於 1 / 100% 增加飽和

opacity
---
等同 opacity 的效果
```cssx
filter: opacity(1);
opacity: 1;
```

drop-shadow
---
於圖像後方增加投影
```cssx
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)