概念

blur

套用高斯函數做模糊化，傳入 radius 值，必須包含長度單位，不接受百分比。

.element {
    filter: blur(0.2em);
}

brightness

用來調整元素的亮度，可利用百分比表示，100% 即圖像原始外觀，0% 圖像會呈現全黑。(也可用數值表示，例如 80% = 0.8)

.element {
    filter: brightness(80%);
}

contrast

用來調整對比度，傳入 100% 以下的值會逐漸降低對比度，0 或是 0% 圖像會呈現灰色，超過 100% 會逐漸增加對比。

.element {
    filter: contrast(160%);
}

grayscale

將圖像調整成灰階的程度，100% 為完全灰階圖像，0% 代表沒有任何改變。

.element {
    filter: grayscale(0);     /* No effect */
    filter: grayscale(.7);    /* 70% grayscale */
    filter: grayscale(100%);  /* Completely grayscale */
}

invert

將圖像顏色做反轉，0% 代表原始圖像，100% 為負片效果。

負片的原理是「相反」，用 255 的數值，減去圖片中每個像素的 RGB 顏色，得到該像素的相反數值，參考自 影像的負片效果

invert( amount )，amount 可以為數值或是百分比

invert 計算公式如下：
amount * (255 - value) + (1 - amount) * value
參考自 CSS invert() Function

.element {
    filter: invert(0);     /* No effect */
    filter: invert(.6);    /* 60% inversion */
    filter: invert(100%);  /* Completely inverted */
}

opacity

調整透明度

.element {
    filter: opacity(0.3);
}

saturate

調整飽和度

.element {
    filter: saturate(155%);
}

sepia

調整懷舊、復古感（圖像的棕褐色程度）

.element {
    filter: sepia(70%);
}

hue-rotate

使用色環調整顏色

.element {
    filter: hue-rotate(120deg);
}

drop-shadow

替圖像非透明的地方增加陰影，和整個元素邊框增加陰影的 box-shadow 不同。

.element {
    filter: drop-shadow(5px 5px 10px orange);
}

url

使用 SVG 濾鏡

<filter> 定義 SVG 濾鏡，使用 id 做標記 (pink-filter)

<svg xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="pink-filter" x="0" y="0" width="100%" height="100%">
      <feComponentTransfer>
        <feFuncR type="linear" slope="1" intercept="0.5"></feFuncR>
        <feFuncG type="linear" slope="0.5" intercept="0.5"></feFuncG>
        <feFuncB type="linear" slope="0" intercept="1"></feFuncB>
      </feComponentTransfer>
    </filter>
  </defs>
</svg>

圖像 image

 <img src="xxxx" alt="xxxx" class="element" />

使用 id 為 pink-filter 的濾鏡效果

.element {
    filter: url(#pink-filter);
}

參考資源

影像的負片效果