CSS 的 backdrop-filter 是和 filter 影像濾鏡類似的樣式屬性，有別於 filter 是針對「元素」，backdrop-filter 是針對「元素背景」套用濾鏡，這個單元會使用 backdrop-filter 搭配 blur()、brightness()、contrast()、invert()、drop-shadow()、opacity()、grayscale() 等函式進行背景的濾鏡處理，創造出漂亮的網頁效果。

影片重點：

• 00:01:03 背景濾鏡和濾鏡的差異
• 00:01:55 blur() 高斯模糊
• 00:03:35 brightness() 亮度
• 00:04:37 contrast() 對比度
• 00:05:26 grayscale() 灰階效果
• 00:06:19 saturate() 飽和度 ( 彩度 )
• 00:07:13 sepia() 棕褐色效果
• 00:07:58 invert() 負片效果
• 00:09:00 hue-rotate() 色相

相關參考：

• 教學文：CSS 背景濾鏡 backdrop-filter
• 影片連結：https://www.youtube.com/watch?v=inqUax4lEdg

後記

今天看到 Gemini App 下載排名超過 ChatGPT 的新聞，很意外的是我並不怎麼意外，不過我想應該過一陣子 ChatGPT 可能又有新東西出來了吧～

最近自己常用 AI 幫我處理家人的「自傳」，發現不論是 ChatGPT 還是 Gemini，處理時還是令人很頭大的，特別是用同樣的指令建立的機器人，第一次對話和第二次對話產生的結果竟然會不同 ( 上傳同樣文字請他修正 )，幸好自己對於家人的自傳還會再次比對，不然被 AI 改錯了還真的會欲哭無淚...

更多參考：

• Youtube 頻道：https://www.youtube.com/@steam.oxxostudio
• CSS 教學大全：https://steam.oxxostudio.tw/category/css/index.html