特定の 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 で動作させたいと考えています。