1

如何模糊特定 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 一起使用。

4

0 回答 0