1

特定の DIV の背後にある画像の部分をぼかすにはどうすればよいですか。現在、bgStretcher JQuery プラグインを使用してブラウザ ウィンドウ全体に大きな imaeg を引き伸ばしているため、サイズを変更すると画像が収まるように引き伸ばされます。

プラグインは次の 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>

bgstretcher DIVの上に浮かび、その中にコンテンツがある絶対位置の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