javascript - <div> 下面有高斯模糊

Question

我有投资组合网站，我需要做以下事情:

1. 我需要 <div>停靠在我页面的左侧部分表现得像“毛玻璃”(参见 http://clip2net.com/clip/m30443/1376076885-clip-147kb.png )

2. 为了更好地理解我想要的内容，请参阅 http://themespectrum.com/scroll-demo :您可能会看到半透明的左侧菜单边栏。我还需要使该侧边栏类似于“磨砂玻璃”，这样在其下方滑动的图像将在此侧边栏区域内变得模糊。

blur = 高斯模糊

我尝试了一切:SVG 滤镜、webkit 东西、不同的 js、jquery，但它们并没有完全按照我的要求做:(它们只对图像或 div 应用一次模糊效果。但我需要的是连续地做，而一个正在滚动图像。

Answer 1

Blur.js 可能就是您要找的!

http://blurjs.com/

它也适用于移动DIV，满足你的预设!

看看可拖动的例子

$('.target').blurjs({
    draggable: true,
    overlay: 'rgba(255,255,255,0.4)'
});