Примените Gaussian Blur к 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

Эта скрипка показывает, как перекрывать фоновое изображение с эффектом размытия:

jsFiddle

Обратите внимание, что это требует специальной иерархии HTML и некоторые JavaScript.