<div>高斯模糊</div>

Question

我有投资组合网站，我需要做以下事项：

1. 我需要停靠在页面左侧的<div>，表现得像“磨砂玻璃”（参见http://clip2net.com/clip/m30443/1376076885-clip-147kb.png）

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

模糊=高斯模糊

我尝试了所有东西：SVG过滤器，webkit东西，不同的js，jquery但它们并没有完全符合我的要求:(它们只对图像或div应用一次模糊效果。但我需要的是持续进行，而一个人正在滚动图像。

Answer 1

Blur.js可能就是你想要的！

http://blurjs.com/

它也适用于移动DIV，满足您的预设！

查看可拖动示例

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

Answer 2

blurjs仅复制模糊div内需要模糊的背景。因此，在这种情况下，只能使用CSS和HTML来实现它，因为它实际上也是如此。看看here

blurjs的问题以及我刚给你的解决方案是，你将无法模糊不断变化的背景，例如幻灯片。当你只需要它'可滚动'时它就会起作用，你只需要修复你的背景。