跳轉到

建立 2025-02-25 更新 2026-09-11

濾鏡（Filter & Backdrop Filter）

filter 作用在元素自己畫出來的像素（含文字、邊框、子元素）。backdrop-filter 作用在元素後面已經畫好的背景，適合毛玻璃。

常見 filter

.thumb:hover img { filter: saturate(1.15) contrast(1.05); }
.disabled img { filter: grayscale(1) opacity(0.7); }
函數 作用 備註
blur(px) 模糊 數值越大越糊
brightness(%) 亮度 1 或 100% 為原圖
contrast(%) 對比
grayscale(%) 去色 1 = 全灰
saturate(%) 飽和
sepia(%) 褐色懷舊
invert(%) 反相 簡易深色圖示技巧之一
hue-rotate(deg) 色相旋轉
opacity(%) 透明 與屬性 opacity 類似但可和其他濾鏡串
drop-shadow(...) 沿不透明輪廓投影 適合 PNG / SVG 圖示

百分比可寫 0–1 的數字，grayscale(1) 等於 100%。

.icon {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 35%));
}

box-shadow 跟盒子走；drop-shadow 跟可見形狀走。

組合與效能

空白分隔即可疊加，順序有差（先 blur 再 contrast 與相反會不同）：

img.hero {
  filter: brightness(0.85) contrast(1.1) saturate(1.1);
}

filter 會建立新的堆疊上下文，有時影響 fixed 子孫或 z-index。大面積即時 blur() 在低階裝置上較重。

backdrop-filter

.topbar {
  background: rgb(255 255 255 / 72%);
  backdrop-filter: blur(16px) saturate(1.4);
}

後面的內容會透出來並被模糊。若瀏覽器不支援，請確保 background 本身已經夠不透明，文字仍可讀。

@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: rgb(255 255 255 / 96%); }
}

總結

  • 圖示去色、圖片 hover 強化 → filter
  • 沿圖形陰影 → drop-shadow
  • 毛玻璃工具列 → backdrop-filter + 半透明背景
  • 記得備案與效能

設計 token 與主題請用 變數。