在网页实现实时背景模糊

之前设计的一个网站用到了像iOS那样的模糊（导航栏下面的背景图片是模糊的，随着页面滚动变化）。但不知道怎么实现。
今天看到了这个例子： http://codepen.io/ariona/full/geFIK/
炸裂！可以实现了！

zhoufenfens

2014-10-18 20:30:50 +08:00

你在逗我？一张模糊的背景图就叫实现了模糊？

Heracles

2014-10-18 20:34:39 +08:00

@zhoufenfens "Drag this box to move around"

cst4you

2014-10-18 20:41:39 +08:00

rock_cloud

2014-10-18 20:44:36 +08:00

虽然有点作弊的赶脚，不过也一种不错的思路

mittya

2014-10-18 20:51:44 +08:00

@zhoufenfens 说的没错，那就是一张模糊背景，作者用了两张图（原图 + 模糊图）

这个有些取巧，但好多就是这样实现的，只不过会稍微高明些，比如用 js 和 html5 的 canvas 来做

比如下面这个，鼠标点图片可显示原图
http://nextday.im/

还有这个
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-blur-filter-tutorial/

这个插件的标题栏
http://vectorflower.com/preview/trans_banner/

更多的可以 google 下关键词 [ html5 blur ]

CSS 的，这个应该达不到你想的那样，不过你可以试试
http://html5-demos.appspot.com/static/css/filters/index.html

Heracles

2014-10-18 20:52:27 +08:00

@mittya 嗯。。。总之以后可以用了

mittya

2014-10-18 20:55:40 +08:00

补充一个以前用过的

http://blurjs.com

zhoufenfens

2014-10-19 15:13:54 +08:00

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.