filter 属性可在 index.html 中直接为图片添加滤镜，无需 js、不修改原图、不依赖服务器，但仅作用于渲染层而非真实像素数据。
filter 属性能直接在 index.html 中给图片加滤镜，不用 JS、不改原图、不依赖服务器——但必须注意：它只作用于元素渲染层，不是真修改像素数据。
为什么 filter 加不上？常见失效场景
不是所有情况都能用 filter，尤其容易被忽略的是层级和合成上下文限制：
-
filter对position: fixed或transform元素可能触发新层叠上下文，导致父级overflow: hidden截断效果（比如 blur 溢出部分被裁掉） - 如果图片是
background-image，filter不生效——得套一层div，用::before或子img承载 - IE 完全不支持
filter（包括-ms-filter也不兼容现代语法），Edge 12+ 才开始支持标准写法 - 某些安卓 WebView（如旧版 UC、QQ 浏览器）对多函数组合（如
blur(2px) contrast(1.3)）解析异常，建议单个函数单独测试
filter 函数参数怎么填才不出错？
每个函数接受的单位/范围不同，填错会导致整个 filter 失效（浏览器会忽略整条声明）：
-
blur()必须带单位：blur(3px)✅，blur(3)❌（无效） -
brightness()和contrast()接受无单位数值或百分比：brightness(1.2)或brightness(120%)都行；0表示全黑，0%同样有效 -
grayscale()、sepia()、invert()接受0到1或0%到100%；grayscale(0.7)和grayscale(70%)等价 -
hue-rotate()单位必须是deg：hue-rotate(90deg)✅，hue-rotate(90)❌（部分浏览器静默失败）
想让滤镜响应用户操作？别直接拼字符串
用 JS 动态改 style.filter 时，常见错误是覆盖遗漏——比如只设 brightness，却把已有的 blur 和 contrast 弄丢了：
- 错误写法：
el.style.filter = 'brightness(' + val + ')'→ 丢掉其他效果 - 正确做法：维护一个配置对象，每次生成完整值：
el.style.filter = `brightness(${b}) contrast(${c}) blur(${r}px)` - 更稳妥的封装：用
CSS Custom Properties配合calc()，例如定义--bri: 1.2;，CSS 中写filter: brightness(var(--bri))，JS 只改 CSS 变量 - 动画场景下，
filter支持硬件加速，但blur()值突变（如从0px跳到10px）易卡顿，建议用transition: filter 0.3s ease并控制步进
要真正“处理图片”而非仅视觉叠加？<canvas></canvas> 是唯一出口
filter 是纯渲染层特效，无法导出处理后图片；若需下载、上传、OCR 或后续 JS 图像分析，必须走 <canvas></canvas>：
- 先用
drawImage()把img绘到 canvas 上 - 再调用
ctx.getImageData()获取像素数组，手动实现灰度、模糊等算法（或引入StackBlur.js） - 最后用
canvas.toDataURL('image/png')得到新图片 base64 - 注意跨域：若图片来自外站且没配 CORS，
getImageData()会因安全策略抛SecurityError
filter 解决 80% 的视觉需求，但只要涉及“导出”“像素级控制”“服务端识别”，就得切到 canvas ——两者不是替代关系，而是分工明确。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
