CSS 滤镜与混合

滤镜与混合原理：按 W3C 公式逐像素计算模糊、亮度、对比度、色相旋转、双色调、毛玻璃等，拖动对比线查看滤镜前后的颜色。

技术栈: filter 公式, backdrop-filter, 颜色矩阵, Canvas ImageData

• 模糊 — 把每个像素换成它周围一圈像素的平均值，图像的细节就被抹平了。
• 亮度 — 把红、绿、蓝三个通道都乘以同一个数。
• 对比 — 以中间灰（0.5）为中心，把每个通道到中心的距离乘以一个倍数。
• 饱和 — 先算出颜色的「灰度」（亮度相同的灰色），再把颜色与这个灰色的差距放大或缩小。
• 色相旋转 — 把每个颜色在色环上转过同一个角度，亮度基本不变。
• 反相 — 把每个通道换成「255 减去它」，黑变白、白变黑、红变青，就像老式胶片的底片。
• 灰度 — 把颜色换成亮度相同的灰色。
• 怀旧褐色 — 模仿老照片发黄发褐的效果。
• 投影发光 — 和 box-shadow 不同，drop-shadow 会沿着图形真实的轮廓（包括透明区域）生成阴影，所以星…
• 组合霓虹 — 霓虹灯的效果是几层滤镜叠出来的——最外层是大范围、半透明的彩色光晕（大模糊的 drop-shadow），中间…
• 毛玻璃 — 给卡片背后的内容做模糊，再盖上一层半透明的白色和一条亮边，看起来就像隔着磨砂玻璃。
• 双色调 — 先把图片变成灰度，只保留「亮还是暗」的信息；再规定两种颜色，最暗处用暗色（主色），最亮处用亮色（主色的互补色…
• 故障抖动 — 模拟信号不良的电视画面。
• 暗角 — 让画面四周逐渐变暗，把视线集中到中心，常见于摄影和电影。
• 发光描边 — 只给图形画轮廓线，并给轮廓线加上同色的模糊阴影（drop-shadow / text-shadow），就得到…
• 背板模糊 — iOS 的导航栏、通知中心都用这个效果——内容在卡片下面滚动，透过卡片看到的部分是模糊的，既能看出下面有东西…