Blur-Effekt auf einem div-Element

Ist es möglich, eine Gaußsche Unschärfe hinzuzufügen? div Element? Wenn ja, wie kann ich das tun?

Ich denke das ist was du suchst? Wenn Sie einem div-Element einen Unschärfeeffekt hinzufügen möchten, können Sie dies direkt über CSS-Filter tun – siehe Geige: http://jsfiddle.net/ayhj9vb0/

 div {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  width: 100px;
  height: 100px;
  background-color: #ccc;

}

Versuchen Sie es mit dieser Bibliothek: https://github.com/jakiestfu/Blur.js-II

Das sollte es für dich tun.

Das habe ich gefunden:

Demo: http://tympanus.net/Tutorials/ItemBlur/

und Anleitung: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

Ich habe Unschärfe beim Arbeiten mit dem SVG-Unschärfefilter:

CSS

-webkit-filter: url(#svg-blur);
        filter: url(#svg-blur);

SVG

<svg id="svg-filter">
    <filter id="svg-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
</svg>

Arbeitsbeispiel:

https://jsfiddle.net/1k5x6dgm/

Bitte beachten Sie, dass dies in IE-Versionen nicht funktioniert

Das Verwischen der Hintergrundelemente eines div kann mit erreicht werden backdrop-filter.

Verwenden Sie es wie folgt:

.your-class-name {
   backdrop-filter: blur(5px);
}

Alle unter dem div platzierten Elemente werden dadurch unkenntlich gemacht.

EDIT: Beachten Sie, dass dies noch nicht von jedem Browser unterstützt wird

man kann einiges machen:

1. filter: blur(10px)

2. backdrop-filter: blur(10px)

3. Wenn Sie die Kanten des div-Elements verwischen möchten, verwenden Sie box-shadow

   box-shadow: 10px 20px 20px grey;

Der dritte Wert von 20px legt den Weichzeichnungswert fest. Je größer der Wert, desto stärker die Unschärfe.

Sie können beide verwenden, beachten Sie dies jedoch backdrop-filter hat keine Browserunterstützung für Firefox und Internet Explorer.