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

Question

我想要达到这个效果：

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

我检查了myfile << random_integer << endl; 模糊但似乎to be buggy in chrome，在IE中根本不起作用（我实际上并不在乎）并且我不确定其他浏览器。< / p>

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

我考虑过使用filter但是开发还没有（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"
  });
});