изображение маски/маскированное изображение альтернатива для размытого элемента меню?

Question

Я пытаюсь добиться этого эффекта:

меню имеет позицию фиксированную и не будет прокручиваться, он будет перекрываться и размытие должно соответствовать основной части изображений.

Я проверил filter размытие, но кажется, to be buggy in chrome, вообще не работает в IE (на самом деле это действительно неважно), и я не уверен в других браузерах.

Я также проверил this link about using gradients, но, похоже, применим только к круглым объектам без фонового изображения как возможного фона.

Я думал об использовании mask-image, но разработки просто еще нет (firefox не поддерживает его), как кажется (опять же, мне все равно, если IE терпит неудачу, но если другие тоже не сработают ...)

Итак, какой был бы лучший способ достичь этого эффекта?

EDIT: пример изображения будет такой: 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" 
    }); 
});