CSS 滤镜生成

怎么用

1. 拖动八条滑杆中的任意一条。预览会跟着变，可以先看效果再决定要不要复制。
2. 想要先有个方向，就从预设起步：复古加褐色并降饱和，黑白走全灰度，冷调旋转色相。
3. 套用预设后还能继续微调任何一条滑杆 —— 预设只负责给初值。
4. 复制生成的 filter 声明。只有偏离中性值的函数会被写出来，字符串因此很短。
5. 把同一条字符串用到你自己的图片上。预览用的是渐变占位图，但滤镜算法完全一致。

常见用法

• 悬停与状态效果 —— 用亮度把缩略图压暗，悬停时再恢复。
• 把配图调到品牌色调 —— 色相旋转加饱和度调整，能把偏亮的图拉向品牌色板。
• 占位与加载态 —— 模糊加灰度可以明确表示「图还没加载好」。
• 深色模式下的图片处理 —— 略降亮度与对比度，避免照片在深色底上刺眼。
• 讲清每个函数的作用 —— 在同一张预览上只动一条滑杆，就能看到该函数的单独效果。

常见问题

问：为什么输出里少了一些函数？ 答：处在中性值的函数（比如 brightness(100%)）不产生任何变化。省略它们可以让声明更好读。

问：能用在视频或整个区块上吗？ 答：可以。filter 对任何元素都生效，包括 video、canvas 与容器；不过对大面积做模糊，绘制开销会明显上升。

问：函数的顺序有影响吗？ 答：有。滤镜按从左到右的顺序依次生效，先灰度再褐色与先褐色再灰度的结果不同。生成结果保持固定顺序，需要的话请有意识地调整。