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);
}

高對比

.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));
}

backdrop-filter

backdrop-filter 對元素背後的區域套用濾鏡（毛玻璃效果）：

.glass {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.frosted {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px) saturate(180%);
}

毛玻璃導航列

.navbar {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);  /* Safari */
}

模態視窗背景

.modal-backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
}

效能考量

• 濾鏡會增加 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);
}