使用jQuery使用bgStretcher模糊DIV背后的图像背景的一部分

Question

如何模糊特定DIV背后的图像部分。我目前正在使用bgStretcher JQuery插件在浏览器窗口中拉伸一个大的图像，因此当调整大小时，图像将拉伸到适合。

该插件会创建以下HTML：

<div id="bgstretcher" class="bgstretcher" style="width: 1920px; height: 534px;">
    <ul>
        <li class="bgs-current" style="display: list-item;">
            <img src="images/backgrounds/bg-2.jpg" alt="" style="width: 1920px; height: 1280px;">
        </li>
    </ul>
</div>

我有一个绝对位置的div，它漂浮在bgstretcher DIV之上，并且内容很丰富。我希望这个DIV背后的图像部分在某种程度上模糊不清，因此这个div中的元素更具可读性。

当我调整浏览器窗口大小时，我希望模糊更新并保持一致。我使用以下代码尝试了Blur.js，但它不起作用：

$('.blur').blurjs({
    source: '.bgstretcher img',
    radius: 7,
    overlay: 'rgba(255,255,255,0.4)'
});

我希望此解决方案至少适用于IE 8 +，Chrome，Safari和Firefox。我正在寻找一些易于实现的东西，以插件的形式。我更喜欢仍然使用Blur.js的选项，但我想让它与bgStretcher一起使用。