<div> 下带有高斯模糊答案

【问题标题】：<div> with gaussian blur under it<div> 下带有高斯模糊
【发布时间】：2013-08-09 19:49:30
【问题描述】：

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

我需要停靠在页面左侧的<div>，其行为类似于“磨砂玻璃”（请参阅http://clip2net.com/clip/m30443/1376076885-clip-147kb.png）
为了更好地理解我想要查看的内容http://themespectrum.com/scroll-demo：您可能会看到半透明的左侧菜单边栏。我还需要使该侧边栏类似于“磨砂玻璃”，这样在其下方滑动的图像将在该侧边栏区域内模糊。

模糊 = 高斯模糊

我尝试了一切：SVG 过滤器、webkit 的东西、不同的 js、jquery，但它们并没有完全按照我的意愿做 :( 他们只是对图像或 div 应用一次模糊效果。但我需要的是不断地做，当一个正在滚动图像时。

【问题讨论】：

【解决方案1】：

Blur.js 可能就是你要找的东西！

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

查看可拖动示例

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

【讨论】：

【解决方案2】：

blurjs 只复制模糊 div 内需要模糊的背景。因此，在这种情况下，可以使用 CSS 和 HTML 来完成，因为它实际上是这样做的。看看here

blurjs 和我刚刚给您的解决方案的问题是，您将无法模糊不断变化的背景，例如幻灯片。当你只需要它是“可滚动的”时它就可以工作，你只需要固定你的背景。

【讨论】：