CSS Filter 濾鏡效果

我們可以使用 CSS Filter 直接在元素上加上濾鏡效果，
先來個所有濾鏡效果的呈現 DEMO：

See the Pen by 蔡蔡 Mavis (@0430shinyu) on CodePen.

10 種 filter 濾鏡效果

filter 效果一共有 10 種，其中最常使用的是第 1 個 blur() 和第 8 個的 opacity()。

1. blur() 模糊效果

函示內放入模糊的程度，值越大越模糊

img{
    filter: blur(5px);
}

2. brightness() 調整亮度

函示內放入 % 數來調整亮度，
< 100% 會減少亮度，
> 100% 會增加亮度。
0% 會呈現全黑，預設值為 1 。

img{
    filter: brightness(2)
}

3. contrast() 調整對比度

函示內放入 % 數來調整對比度，
< 100% 會減少對比度，
> 100% 會增加對比度。

img{
    filter: contrast(200%)
}

4. drop-shadow() 陰影效果

這個函數的特性和 box-shadow 的屬性很相似，
但 drop-shadow 可以製作和物件不透明區域完全相同形狀的陰影，詳細比較可以參考這篇文章

drop-shadow() 可帶入的 4 個參數分別為：

1. (必填)offset-x：陰影水平偏移量的長度
2. (必填)offset-y：陰影垂直偏移量的長度
3. blur-radius：隱影模糊程度，值越大越模糊
4. color：陰影顏色

   img{
       filter: drop-shadow(16px 16px 10px black)
   }

5. grayscale() 調整灰階程度

函示內放入 % 數或、0-1 來調整圖像灰度，
值介於 0-100% 或 0-1，
0% 和 0 代表顏色不變，為預設值，100% 和 1 代表變黑白的。

img{
    filter:grayscale(1);
}

6. hue-rotate() 色相相轉

透過色相旋轉來調整顏色呈現，函示內放入 deg 色環角度值來調整圖像灰度，
值介於 0deg - 360deg 間，超過 360deg 的值相當於繞了一圈。

img{
    filter: hue-rotate(90deg);
}

7. invert() 負面效果

所謂的負片就是反轉成顏色和明暗程度，
函示內放入 % 數設定反轉的程度，值介於 0-100% 間，預設值為 0%。

img{
    filter: invert(100%);
}

8.opactiy 調整透明度

函示內放入 % 數設定透明度，值介於 0-100% 間，預設值為 100%。

img{
    filter: opacity(50%);
}

9.saturate() 調整飽和度

函示內放入 % 數設定飽和度，預設值為 1
<100% 越來越不飽和
>100％ 高度飽和

img{
    filter: saturate(200%);
}

10. sepia() 深褐色效果

函示內放入 % 數設定深褐色的程度，值介於 0-100% 之間，預設值是 0。

img{
    filter: sepia(100%)
}

複合效果

除了單獨的使用濾鏡外，我們也可以組合任意數量的函數來設定效果。

/* 同時設定對比度、亮度、飽和度*/
img{
    filter: contrast(175%) brightness(3%) saturate(200%);
}

結語

以上就是不同 filter 的介紹，實作上如果有遇到子元素被 filter 影響的問題，
可以參考這篇文章 -CSS Filter 影響子元素的解決辦法

參考資料

MDN Web Docs-filter