↓ 今日學習重點 ↓
學會 CSS 濾鏡
filter的用法學會 CSS 背景濾鏡
backdrop-filter的用法
除了用繪圖軟體在圖片上調整色調，CSS 內建的濾鏡效果也能讓我們做到這些特殊效果，例如：模糊、變亮、對比、色相、飽和度調整等等，甚至還可以做到毛玻璃效果！
今天，我們要介紹的是 filter 與 backdrop-filter 這兩個強大的 CSS 屬性。
一、濾鏡 filter
filter 屬性能讓你對 HTML 元素本身做一系列的圖像處理效果，讓我們能在不使用繪圖軟體的情況下實現各種特效，例如：模糊、明度、對比度等。
基本語法
filter 使用的語法很簡單，語法如下：
div {
filter: 方法(數值);
}
特效效果
而 filter 總共有以下幾種效果可以使用：
DEMO: CSS filter
blur：模糊
需要填寫數值，單位可以是px、em、rem等。brightness：明度
調整亮度，需要填寫百分比值：100%為原本的明度，往下是調暗，往上是調亮。contrast：對比度
調整對比度，需要填寫百分比值：100%為原本的對比度，往下是減低，往上是增加。grayscale：灰階
轉為灰階，需要填寫 0 到 1 之間的值，1 代表完全灰階。hue-rotate：色相
調整色相環的位置，需要填寫角度，單位可以是deg（度數）或turn（圈數）。invert：反轉
轉為相反的顏色，會變成對比色，需要填寫 0 到 1 之間的值，1 代表完全相反。opacity：透明度
調整對比度，需要填寫百分比值：100%為不透明，效果等同於：opacity: 數值;。sepia：棕褐色
轉為懷舊的褐色調，需要填寫 0 到 1 之間的值，1 代表完全褐色。saturate：飽和度
調整飽和度，需要填寫百分比值：100%為原本的對比度，往下是減低，往上是增加。drop-shadow：陰影
在圖片中非透明的周圍加上陰影，這針對透明圖片超好用！
例如，如果單單為透明圖片加上基本的陰影box-shadow，會像下方圖片一樣悲劇，陰影沒有加在實際圖案的周圍，但用了filter的drop-shadow就能為實際圖案的邊緣加上陰影：
多重特效
你也可以使用多種特效在一個 HTML 元素上，只要簡單使用空格隔開就好了，例如：
div {
filter: contrast(175%) brightness(105%);
}
二、背景濾鏡 backdrop-filter
backdrop-filter 可以對 HTML 元素後面的背景製作濾鏡效果，影響的是背後的東西，而不是自己本身。最常見的是用來製作非常受歡迎的「毛玻璃效果 Glassmorphism」，利用模糊區隔出背景，製造出透明感的景深效果，最常見被用在 iOS 系統中、彈跳視窗光箱（lightbox）或是導覽列（Navbar）上等等。
在 Dribbble 上搜尋的 Glassmorphism 的話，會出現以下像這樣酷炫的 UI，給大家參考：
基本語法
backdrop-filter 語法的使用方式，基本上和 filter 一樣：
div {
backdrop-filter: 方法(數值);
}
特效效果
backdrop-filter 通常用在浮動的 HTML 元素上（如：絕對定位、固定定位、sticky 等等）。它可使用的效果和 filter 一樣，請參考上面 filter 所列出來的所有效果。
只不過經我實測，opacity 和 drop-shadow 不起作用，所以以下的 DEMO 範例沒有它們：
DEMO: CSS backdrop-filter
剛剛說的「毛玻璃效果 Glassmorphism」就是使用其中的 blur() 效果。
多重特效
和 filter 一樣，你也可以使用多種特效在一個 HTML 元素上，只要簡單使用空格隔開就好了，例如：
.element {
backdrop-filter: blur(10px) brightness(60%);
}
上面的例子會將元素後面的背景模糊處理，並且使其稍微變暗（亮度調低至 60%）。這樣可以做出類似黑色毛玻璃效果。
三、固定定位（fixed）+ filter/backdrop-filter 的陷阱
如果 fixed 項目的父層上有 filter 或 backdrop-filter 屬性，該 fixed 項目就不會依據「瀏覽器的視窗大小」進行定位，而是依據「該 HTML 的父層」定位。
雖然我有點忘記當初是因為什麼版型，遇到這樣的陷阱，
但我這邊可以做個實例給大家參考看看：
解法： 改變 filter 的元素，或是改使用 sticky 做到類似效果。
延伸閱讀：
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
感謝看到最後的你，若你覺得獲益良多，請不要吝嗇給我按個喜歡。❤️
如果你喜歡我的創作，還想看看其他有趣的分享與日常，
可以追蹤我的 IG @im1010ioio，或者是🧋送杯珍奶鼓勵我，謝謝你🥰。
