图像蒙版/蒙版图像替代模糊菜单元素？

Question

我正在尝试实现这个效果：

菜单位置固定，不会滚动，会重叠，模糊应该与图像的底层部分相对应。

我检查了filter blur，但似乎to be buggy in chrome 在 IE 中根本不起作用（实际上我并不关心），而且我不太确定其他浏览器。

我也检查了this link about using gradients，但它似乎只适用于没有背景图像作为可能背景的圆形物体。

我曾考虑过使用mask-image，但似乎还没有开发（firefox 不支持它）（同样，我根本不在乎 IE 是否失败，但如果其他人也失败了...... .)

那么，实现这种效果的最佳方法是什么？

编辑：示例图片如下：http://img.youtube.com/vi/zXgyoDAuaH0/maxresdefault.jpg

这里是模糊的图像

(新窗口打开下载)

允许使用生成的模糊图像

Answer 1

I ended up using js to scroll the background position

HTML

<div class="content"> 
  <div class="menu"> x
</div>
</div>

CSS

.content{
  position: relative;
 height: 10000px;
  background: url('http://img.youtube.com/vi/zXgyoDAuaH0/maxresdefault.jpg') 0 0;
}

.menu{
  top: 20px;
  left: 20px;
  height: 100px;
  width: 500px;
  background: url('http://i.stack.imgur.com/3xgJ7.jpg');
  background-position: -20px -20px;
  border: 1px solid red;
  position: fixed;
}

JS

$(document).on("scroll", function() {
  console.error();
  $(".menu").css({
    backgroundPosition: "-20px " + (-13 - $(window).scrollTop()) + "px"
  });
});