Javascript 逐渐饱和/去饱和卷轴上的背景图像？

我有一个项目，我的工作与全尺寸固定背景图像。我想弄明白的是，最好的方法是让图像以灰度开始，然后当用户向下滚动时，颜色会变得更饱和，直到页面结束时变成全色。我正在寻找一种平滑的渐变色

---

我曾考虑过两幅图像，一种颜色和一种灰度相互叠加，并改变不透明度以获得效果，但这意味着加载两幅大图像。有没有更好的方法只使用一个图像

您的一些选择是

照你说的做，加载2张图片

只加载一个，然后使用canvas元素进行去饱和

使用新的过滤器css属性

---

最好结合选项1和3，使用Modernizer确定支持度

这两种图像技术可能有助于回退，但您可以使用css在更现代的浏览器上更改图像饱和度（0-1）。谢谢，我终于做到了！