CSS 滤镜（filter）

CSS 滤镜（filter）是 CSS3 推出的一组"即时图形后期"工具。

它不需要 Photoshop，也不需要 Canvas，只要一行声明就能把亮度、对比度、模糊、色相偏移等视觉效果实时渲染到任何元素 上------图片、文字、视频、背景图，甚至整个模块都可以一次性处理。

下面带你从零开始认识这套"前端版美图秀秀"。

---

一、最简记忆：滤镜 = 函数链

filter: <函数-1>(参数) <函数-2>(参数) ... ;

• 顺序从左到右依次执行，类似管道符。
• 每个函数都有明确区间，超出即 clamp（被裁剪）。
• 可以写任意多个，空格分隔；也可以只写一个。

---

二、10 个原生函数速查表

函数	作用	默认值	常见玩法
blur(px)	高斯模糊	0	毛玻璃背景、loading 遮罩
brightness(number)	线性亮度	1	0.6 夜间模式，1.4 高光
contrast(number)	对比度	1	1.5 让黑白更分明
grayscale(number)	去色	0	1 彻底灰度，0.5 淡彩
sepia(number)	复古棕褐	0	1 老照片，0.3 暖色打底
saturate(number)	饱和度	1	0 灰度，2 鲜艳
hue-rotate(deg)	色相旋转	0deg	180deg 反色，90deg 换季节
invert(number)	负片	0	1 完全反色，0.9 暗黑模式
opacity(number)	透明度	1	与 CSS opacity 差异见注①
drop-shadow()	真实投影	无	支持半透明 PNG 的"镂空"阴影

注①：filter:opacity() 会创建独立层叠上下文 ，而 opacity 属性不会；前者还能被硬件加速。

---

三、组合实战 4 例

1. 一键暗黑

.dark {
  filter: invert(1) hue-rotate(180deg) brightness(1.1);
}

原理：先反色，再把色相转半圈，最后略提亮，文字与图片一起"变黑"。

2. 毛玻璃遮罩

.mask {
  backdrop-filter: blur(10px) saturate(1.2);
  background: rgba(255,255,255,0.4);
}

backdrop-filter 只模糊背后内容，自身背景保持半透明，iOS 风导航栏标配。

3. 图片 hover 高亮

img {
  transition: filter .3s;
}
img:hover {
  filter: brightness(1.15) saturate(1.25);
}

鼠标移入瞬间"亮 + 艳"，移出平滑回落。

4. 文字故障风

.glitch {
  filter: contrast(2) hue-rotate(90deg);
  text-shadow: 2px 0 #0ff, -2px 0 #f0f;
}

高对比 + 色相偏移 + 双色阴影，赛博朋克感拉满。

---

四、性能与兼容

1. 硬件加速：现代浏览器会把 filter 丢给 GPU，通常比 Canvas 快，但：

   • 同时挂 5+ 个滤镜、大面积模糊（>30 px）或 4K 视频仍可能掉帧。
   • 移动端尽量 will-change:filter 提前声明，动画结束及时清除。

2. 兼容性（2025 年 5 月）：

   • 桌面：Chrome 53+、Edge 79+、Firefox 55+、Safari 14+ 全支持。
   • 移动端：iOS Safari 14+、Android Chrome 90+ 全覆盖。
   • 唯一老梗：IE 全系不支持，可优雅降级（无滤镜即原图）。

3. 前缀：如今无需 -webkit-，但老设备（Android 7）仍建议：

-webkit-filter: blur(5px);
filter: blur(5px);

---

五、常见坑点

• filter 会让元素生成包含块 （contain: paint），内部 position:fixed 会"降级"为相对于该元素。
• drop-shadow 与 box-shadow 差异：前者沿不透明像素边缘生成，适合 PNG 图标；后者永远矩形。
• 滤镜不能 作用于：
  -- 父元素对子元素的背景穿透（background-filter 才行）
  -- 部分表单控件（如 <video> 的 controls 条，需关闭原生控件再自定义）

---

六、一句话总结

CSS filter 把"后期调色"从设计软件搬到了浏览器，一行代码即可让网页拥有场景化氛围 ：

白天/黑夜、节日换肤、图片灰度、视频负片、毛玻璃导航......

掌握这 10 个函数，你就拥有了不刷新页面、不增加图片体积的即时视觉魔法。