CSS filter 濾鏡

filter 屬性可以對元素套用視覺效果，如模糊、灰階、亮度調整等，常用於圖片處理。

濾鏡函數

blur（模糊）

.blur {
  filter: blur(5px); /* 模糊半徑 5px */
  filter: blur(0); /* 不模糊 */
}

grayscale（灰階）

.grayscale {
  filter: grayscale(100%); /* 完全灰階 */
  filter: grayscale(50%); /* 50% 灰階 */
  filter: grayscale(0%); /* 原色 */
}

brightness（亮度）

.brightness {
  filter: brightness(1); /* 原始亮度 */
  filter: brightness(1.5); /* 增加 50% 亮度 */
  filter: brightness(0.5); /* 降低 50% 亮度 */
  filter: brightness(0); /* 全黑 */
}

contrast（對比度）

.contrast {
  filter: contrast(1); /* 原始對比 */
  filter: contrast(2); /* 增加對比 */
  filter: contrast(0.5); /* 降低對比 */
}

saturate（飽和度）

.saturate {
  filter: saturate(1); /* 原始飽和度 */
  filter: saturate(2); /* 增加飽和度 */
  filter: saturate(0); /* 無彩色 */
}

sepia（棕褐色/復古）

.sepia {
  filter: sepia(100%); /* 完全復古效果 */
  filter: sepia(50%);
}

hue-rotate（色相旋轉）

.hue-rotate {
  filter: hue-rotate(90deg); /* 旋轉 90 度 */
  filter: hue-rotate(180deg); /* 旋轉 180 度 */
}

invert（反相）

.invert {
  filter: invert(100%); /* 完全反相 */
  filter: invert(50%);
}

opacity（透明度）

.opacity {
  filter: opacity(50%); /* 50% 透明 */
  filter: opacity(0.5); /* 同上 */
}

drop-shadow（陰影）

.drop-shadow {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
  /* x偏移 y偏移 模糊半徑 顏色 */
}

drop-shadow 和 box-shadow 的差別：drop-shadow 會依照元素的透明度產生陰影（適合 PNG 圖片），而 box-shadow 是方形陰影。

組合多個濾鏡

用空格分隔套用多個濾鏡：

.multiple-filters {
  filter: blur(2px) brightness(1.2) contrast(1.1);
}

實用範例

圖片 Hover 效果

img {
  transition: filter 0.3s;
}

img:hover {
  filter: brightness(1.1) contrast(1.1);
}

灰階 Hover 變彩色

img {
  filter: grayscale(100%);
  transition: filter 0.3s;
}

img:hover {
  filter: grayscale(0%);
}

暗化覆蓋

.dark-overlay {
  filter: brightness(0.5);
}

復古照片

.vintage {
  filter: sepia(50%) contrast(1.1) brightness(1.1);
}

組合多個濾鏡

.complex-effect {
  filter: contrast(1.5) brightness(0.9) sepia(0.3);
}

backdrop-filter (背景濾鏡)

backdrop-filter 與 filter 的不同點在於：filter 作用於元素本身，而 backdrop-filter 作用於元素後方的區域。這常用來製作現代 UI 盛行的「毛玻璃 (Glassmorphism)」效果。

常用實戰範例

.glass-card {
  /* 背景必須帶有透明度才能看到濾鏡效果 */
  background: rgba(255, 255, 255, 0.2);

  /* 對元素後方的背景進行模糊 */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* Safari 支援 */

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 15px;
}

更多組合效果

• 標準毛玻璃：backdrop-filter: blur(5px);
• 暗色磨砂玻璃：backdrop-filter: brightness(60%) blur(10px);
• 高彩毛玻璃：backdrop-filter: blur(20px) saturate(180%);

高對比

.high-contrast {
  filter: contrast(1.5) saturate(1.2);
}

模糊背景

.backdrop {
  filter: blur(10px);
}

禁用狀態

.disabled {
  filter: grayscale(100%) opacity(50%);
  pointer-events: none;
}

圖片陰影（透明背景）

.logo {
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.3));
}

效能考量

• 濾鏡會增加 GPU 負擔
• 大面積模糊效果可能影響效能
• 動畫濾鏡時要注意效能
• 考慮使用 will-change: filter 優化

.animated-filter {
  will-change: filter;
  transition: filter 0.3s;
}

瀏覽器支援

• filter 在現代瀏覽器中支援良好
• backdrop-filter 需要加上 -webkit- 前綴支援 Safari

.glass {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}