Divにガウスぼかしを適用

Question

ブラウザでガウスぼかしを実現する最もよく知られている、または広く使用されているツールのように見えるStackBlurというライブラリ/プラグインがあります。

しかし、見た目からは、画像をぼかすだけで動作します。私はdivだけをぼかすことを見ているので、divが画像上に重ねられると、divの背景は画像のその部分がぼやけてしまいます。

これは可能ですか？その場合は、最も広く使用され、ブラウザにやさしい方法やツールは何ですか？

EDIT

私はCodePenを作成しました、あなたはいくつかの問題がありますそれを見たときに、最初にdiv要素の背景には、実際にぼかしません。そして、第二に、divのエッジがぼんやり見えるようになるとぼやけてしまいます。

// 

Answer 1

私はSVG-filtersの使用をお勧めします：

.filtered { 
 
    -webkit-filter: url(#f1); 
 
    filter: url(#f1); 
 
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0"> 
 
    <defs> 
 
    <filter id="f1"> 
 
     <feGaussianBlur stdDeviation="3"/> 
 
    </filter> 
 
    </defs> 
 
</svg> 
 

 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div> 
 
<div class="filtered">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>

Answer 2

はCSS3 filtersを見てみましょう：CSS3 filter Property

それを使用すると、blurぼかしクラスを適用することで何かをすることができますそれらに：

<style> 
.blurThreePX { 
    -webkit-filter: blur(3px); /* Chrome, Safari, Opera */ 
    filter: blur(3px); 
} 
</style> 
<div class="blurThreePX">Hello world</div> 

EDIT 1

このフィドルは、ぼかし効果で背景画像をオーバーラップする方法を示しています。これは特殊なHTMLの階層構造といくつかのJavaScriptを必要としないこと

jsFiddle

注意。