javascript - 滚动上的背景图像逐渐饱和/去饱和?

标签 javascript jquery css

我有一个元素正在使用全尺寸固定背景图像。我想弄清楚的是让图像以灰度开始的最佳方式,然后随着用户向下滚动,颜色变得更加饱和,直到页面末尾为全彩色。我正在寻找一种平滑的逐渐淡入/淡出颜色。

我正在考虑将 2 张图像(一种颜色和一种灰度)叠加在一起并更改不透明度以获得效果,但这意味着加载 2 个大图像。是否有仅使用一张图像的更好方法?

最佳答案

你的一些选择是

  1. 照你说的做,载入2张图片
  2. 只加载一个并使用 Canvas 元素进行去饱和
  3. 使用新的过滤器 css 属性

最好结合选项 1 和 3,使用 modernizr 确定支持

关于javascript - 滚动上的背景图像逐渐饱和/去饱和?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31300559/

相关文章:

javascript - 未捕获的类型错误 : $. ajax 不是函数 |在使用最新的完整 jQuery 版本时

jQuery插入多级HTML "smarter"方式?

css - 一行菜单 float 变化

javascript - 是否可以在 Meteor 中创建退出 Hook ?

javascript - 追加元素后如何添加事件函数?

javascript - 扩展 expressjs 资源属性

javascript - 将鼠标悬停在选择器上时,Jquery 禁用双击

jquery - jquery clone() 之后 addthis-button 丢失 click-eventhandler

css - 两列布局中的垂直对齐按钮

html - 水平下拉菜单的展开按钮