jquery - 模糊菜单元素的图像蒙版/蒙版图像替代方案？

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"
  });
});